在< select>标签内的输入文本字段 [英] Input text Field inside `<select>` tag

问题描述

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

I am creating a dropdown with AngularJS.
here is the code..

<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标签中.该怎么办?

NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag. But Input tag can't nested in select tag.What should I do?

推荐答案

应对<select>噩梦

从文档中:

Dealing with the <select> nightmare

From the Docs:

<select>元素技术摘要 ¹

<select> Element Technical summary¹

允许的内容:零个或多个 <optgroup> 元素.

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>元素内.

The short answer is that <input> elements can not be placed inside <select> elements.

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

The datalist element is intended to provide a better mechanism for this concept.

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

有关更多信息，请参见

• HTML组合框，其中包含用于键入条目的选项
• MDN学习HTML表单-处理选择噩梦

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

这篇关于在< select>标签内的输入文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！