HTML表单字段与搜索功能

HTML form field with search function

本文关键字：搜索 功能 字段 表单 HTML      更新时间：2023-09-26

是否有可能有一个html文本输入字段显示下拉选择，因为你键入的文本，匹配可能的结果?

举个例子——我有一个50家公司的名单。当用户输入其中一家公司的名称时，它会显示可能的匹配项。有点像谷歌做的，但仅限于给出的选择。

只能使用Javascript(因为HTML不是动态的)。Javascript(通过jQuery库变得更容易)可以通过web的浏览器端编辑数据(例如HTML)，这意味着您可以实时编辑您的网站。有不同的插件可以做到这一点(如:http://www.w3schools.com/jsref/event_onkeypress.asp)，或者您可以自己构建一些。

自动补全功能。这可以使用Jquery轻松完成。这里有一个很好的文档。

下面的例子。将下面的编程语言名称(在availableTags中)替换为您的50个公司名称。如果你觉得在这里给出50个名字太多了，你也可以从文件中读取

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script>
  $(function() {
    var availableTags = [ //give your company names below
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

</body>
</html>

HTML中没有任何内容，检查select .js。

如果你只需要一个提供建议的文本输入，我会选择HTML5标准的<datalist>。

但是，由于您希望限制用户的选择，因此需要<select>元素的增强版本。选择就是你要找的。它通过搜索和其他有用的东西增强了您的标准<select>输入，同时仍然可以访问，维护良好，开箱即用。

相关文章：