我在我的角度项目中使用ng-selecthttps://www.npmjs.com/package/@ng-select/ng-selectnpm库。它正在处理大数据,没有任何问题。但是无法编辑所选项目,并且一旦选择了该项目,导航键就无法在输入框中使用。
例如,我首先搜索了“ something12”,然后我不得不选择“ something31”,在这种情况下,我无法清除最后两个字符。对于更改搜索,我必须清除整个文本,然后再次键入以进行新搜索。
版本:ng-select版本-2.16.4角版本-7.2.2
如果需要,可以使用纯HTML和CSS解决方案
选项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>
选项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)
最后但不是最少,这可能会帮助您Angular editable dropdown - make editable based on selected value