无法在以ng-select角度选择项目后编辑项目

问题描述 投票:0回答:1

我在我的角度项目中使用ng-selecthttps://www.npmjs.com/package/@ng-select/ng-selectnpm库。它正在处理大数据,没有任何问题。但是无法编辑所选项目,并且一旦选择了该项目,导航键就无法在输入框中使用。

例如,我首先搜索了“ something12”,然后我不得不选择“ something31”,在这种情况下,我无法清除最后两个字符。对于更改搜索,我必须清除整个文本,然后再次键入以进行新搜索。

版本:ng-select版本-2.16.4角版本-7.2.2

css angular angular-ngselect
1个回答
0
投票

如果需要,可以使用纯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

© www.soinside.com 2019 - 2024. All rights reserved.