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

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

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

利用 HTML 的

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

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

在此代码中，元素指定“brow”作为关联的

搜索功能

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

使用 Bootstrap 设置样式

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

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

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

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