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

Input text Field inside `<select>` tag

我正在用 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 标签内创建一个 searchbar。 但是Input标签不能嵌套在select中tag.What怎么办？

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

或者，如果您需要更多高级功能以及搜索功能，例如 multi-select、select all、deselect all、禁用选项、键盘控制等等，请尝试以下操作： http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main

使用 select2 作为动态选项而不是 HTML select 选项： 这是 link for select 使用 js:

https://select2.org/tagging

在我看来，这里有三个选项。

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

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

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

正如 Mohd 所说 https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too

选项三 - 创建您自己的东西

它甚至不需要使用 <select> 标签。这是迄今为止最困难的，但也是最可定制和最适合个人需求的。 select 标签将不会被使用，因为它不支持其中的输入，因此需要使用一些高端的 css，以及一些向后兼容性的多浏览器测试，即已经制作的库已经做了。

应对<select>噩梦

来自文档：

<select> Element Technical summary1

Permitted content: Zero or more <option> or <optgroup> elements.

Tag omission: None, both the starting and ending tag are mandatory.

Permitted parents: any element that accepts phrasing content

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

<datalist>元素2

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

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

有关详细信息，请参阅