1

I am using ng-select

https://www.npmjs.com/package/@ng-select/ng-select

npm library in my angular project. it is working with large data without any problem.

But I am unable to edit the selected item and navigation keys are not working inside the input box once the item is selected.

For example I searched something12 first, then I had to choose something31. In this case I can't clear last two characters. To change the search thing, I have to clear whole text and retype again for new search.

Versions:

ng-select 2.16.4
angular 7.2.2
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
venkatesh karthick
  • 335
  • 3
  • 12
  • 1
    Can you create a [stackblitz](https://stackblitz.com/) of your working code please – Awais Dec 31 '19 at 06:24
  • https://stackblitz.com/edit/ng-select try the same in this one. – venkatesh karthick Dec 31 '19 at 06:30
  • It is the default behavior of select that you cannot edit in that, so that you cannot navigate trough charters using keys. For that you need some hack to paste `input`over select and assign its values in `input`. If you need ill provide you with simple `HTML5` solution – Awais Dec 31 '19 at 06:56
  • yeah it is the default behaviour but i have to make it work by some way. can you give the solution which you mentioned. – venkatesh karthick Dec 31 '19 at 08:31

2 Answers2

0

Pure Html and Css Solution in case you need

Option 1

 .select-editable {
     position:relative;
     background-color:white;
     border:solid grey 1px;
     width:120px;
     height:18px;
 }
 .select-editable select {
     position:absolute;
     top:0px;
     left:0px;
     font-size:14px;
     border:none;
     width:120px;
     margin:0;
 }
 .select-editable input {
     position:absolute;
     top:0px;
     left:0px;
     width:100px;
     padding:1px;
     font-size:12px;
     border:none;
 }
 .select-editable select:focus, .select-editable input:focus {
     outline:none;
 }
<div class="select-editable">
    <select onchange="this.nextElementSibling.value=this.value">
        <option value=""></option>
        <option value="115x175 mm">115x175 mm</option>
        <option value="120x160 mm">120x160 mm</option>
        <option value="120x287 mm">120x287 mm</option>
    </select>
    <input type="text" name="format" value="" />
</div>

Option 2

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
(click once to focus and edit, click again to see option dropdown)

Last but not Least May be this would help you Angular editable dropdown - make editable based on selected value

Awais
  • 4,752
  • 4
  • 17
  • 40
0

first you need to add: 

[multiple]="false"
[editableSearchTerm]="true"
to your ng-select

after you need to use a custom template for editable item:

<ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
   <span class="ng-value-label" >{{item.name}}  {{item.id}}</span>
</ng-template>
Istvan Dembrovszky
  • 89
  • 1
  • 1