Html 如何在没有 JS 的情况下创建带搜索的 Select 菜单

发布于01月22日

有没有可能创建一个带有纯html和css搜索选项的 Select 菜单，而不使用JavaScript.

我知道HTMLhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/select中有一个SELECT标记，但其中没有搜索.我需要创建一个简单的网页，我不想使用脚本/PHP或库，因为我不知道这些编程语言.

推荐答案

是的，这是可能的.如果将<input>标记与<datalist>而不是<select>标记一起使用.在<input>标记中，您需要编写list属性并想出一个名称.此名称将是<datalist>的id，如本例所示.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" list="select" />

    <datalist id="select">
      <option value="item 1"></option>
      <option value="item 2"></option>
      <option value="item 3"></option>
      <option value="item 4"></option>
      <option value="item 5"></option>
      <option value="item 6"></option>
      <option value="item 7"></option>
      <option value="item 8"></option>
    </datalist>
  </body>
</html>

使用<input>标签，您可以搜索项目.所有这一切都是在纯HTML中完成的，不含Java脚本.