javascript - 在“选择为”选项中插入输入文本

Question

我正在创建一个列表，用户可以使用输入文本对其进行过滤。现在，该字段与选择分开，我将输入设置为选项，如下图所示

这是我的CODE 。非常感谢!

    <div class="row">
  <div class="col-md-2">
    Search: <input ng-model="query"> 
  </div>
  <div class="col-md-10">
    <!--Body content-->

    <select class="phones">
      <option ng-repeat="phone in phones.data | filter:query">
        <span>{{phone.name}}</span>  
        <span>{{phone.age}}</span>
      </option>
    </select>

  </div>
</div>

Answer 1

这是一项有点复杂的任务，我建议您使用现有的组件/库，除非您的要求非常非常特殊。

我可以推荐选择，它将帮助您创建通过文本框进行过滤的下拉菜单:

https://github.com/harvesthq/chosen

关于评论中的要求，不仅需要从单词的开头进行搜索，Chosen中有一个选项可以实现这一点 - 它称为“search_contains”。有关详细信息，请参阅所选文档:

http://harvesthq.github.io/chosen/options.html

另请参阅有关“search_contains”的 StackOverflow 问题:

Changing search behavior in jquery plugin Chosen