如何使用 HTML 的数据列表和输入列表属性创建可搜索的选择框？

创建具有增强用户输入功能的选择框

用户通常更喜欢使用选择框来手动输入文本，但有时会出现需要更通用的输入选项。引入具有内置搜索功能的选择框，使用户可以轻松找到所需的项目。

利用 HTML 的

实现此功能的简单方法是利用 HTML 的

<code class="html">&lt;input list=&quot;brow&quot;&gt;
&lt;datalist id=&quot;brow&quot;&gt;
  &lt;option value=&quot;Internet Explorer&quot;&gt;
  &lt;option value=&quot;Firefox&quot;&gt;
  &lt;option value=&quot;Chrome&quot;&gt;
  &lt;option value=&quot;Opera&quot;&gt;
  &lt;option value=&quot;Safari&quot;&gt;
&lt;/datalist&gt;</code>

在此代码中，元素指定“brow”作为关联的<datalist>。 包含 代表要在选择框中列出的项目的元素。

搜索功能

当用户开始在输入字段中键入时，奇迹就会发生。浏览器会自动过滤

使用 Bootstrap 设置样式

虽然此解决方案功能齐全，但您可以使用 Bootstrap 增强其外观和行为强大的 CSS 类。这是一个示例：

<code class="html">&lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;browser&quot;&gt;Browser:&lt;/label&gt;
  &lt;input list=&quot;brow&quot; class=&quot;form-control&quot; id=&quot;browser&quot;&gt;
&lt;/div&gt;
&lt;datalist id=&quot;brow&quot;&gt;
  ...
&lt;/datalist&gt;</code>

通过包装 和 中的元素并添加“form-control”类，您将为选择框提供与 Bootstrap 样式一致的内聚且现代的外观。

以上是如何使用 HTML 的数据列表和输入列表属性创建可搜索的选择框？的详细内容。更多信息请关注PHP中文网其他相关文章！