在<select>标签内的输入文本字段

Question

我正在使用AngularJS创建一个下拉列表。
这是代码。.

<div class="col-md-9">
  <input type="text" placeholder="Enter Module" list="names"
         ng-model="data.Name" />
  <select id="names" class="form-control" ng-model="data.Name"
          ng-change="SetCategory(data.Name)" name="name">
    <option value='' disabled selected>------------- select an option ----------</option>
    <option ng-repeat="e in BrData | filter:data.Name "
            value="{{e.Name}}">{{e.Price}}</option>
  </select>
</div>

注意：列表是动态的，我正在使用 AngularJS 来获取数据。
我需要在 select 标签内创建一个搜索栏。 但是Input标签不能嵌套在select标签中。该怎么办？

Answer 1

您可以在UI Bootstrap中使用提前输入：https://angular-ui.github.io/bootstrap/#!#typeahead

或者，如果您需要更多高级功能以及诸如多选，全选，取消全选，禁用选项，键盘控件等更多搜索功能，请尝试以下操作：http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main

Answer 2

我的看法，这里有三个选择。

选项一-在下拉列表外部输入

从下拉列表外部获取输入，并根据外部的值过滤值。我知道这并不是您想要的功能，但这会为您省去一些麻烦。

选择二-使用某种第三方下拉库

正如Mohd所述，https://angular-ui.github.io/bootstrap/#!typeahead很合适，UI select too

选项三-创建自己的东西

它甚至不需要使用update标签。到目前为止，这是最困难的事情，但也是最可定制的并且适合个人需求。 select标签将不被使用，因为它不支持其中的输入，因此将需要使用一些高端的css，以及一些已经完成的库已经完成的向后兼容的多浏览器测试。

Answer 3

应付<select>噩梦

从文档中：

  

<select>元素技术摘要 ¹

     

    

允许的内容：零个或多个<option>或<optgroup>元素。

         

标记省略：无，开始标记和结束标记都是必需的。

         

允许的父母：任何接受措辞内容的元素

  

简短的答案是<input>元素不能放在<select>元素内。

<datalist>元素 ²

datalist元素旨在为该概念提供更好的机制。

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

有关更多信息，请参见

• HTML combo box with option to type an entry
• MDN Learn HTML Forms - Dealing with the select nightmare

Answer 4

使用select2作为动态选项而不是HTML select选项： 这是使用js进行选择的链接：

https://select2.org/tagging