Question

当您键入与可能结果匹配的文本时，是否可以让html文本输入字段显示下拉选项？

例如 - 我有50家公司的名单。当该人员以其中一家公司的名义输入时，它会显示可能的匹配项。有点像谷歌，但仅限于给出的选择。

Answer 1

只有使用Javascript才能实现（因为HTML不是动态的）。 Javascript（通过jQuery库变得更容易）可以通过Web的浏览器端编辑数据（例如HTML），这意味着您可以在视图上实时编辑您的网站。有不同的插件可以执行此操作（例如：http://www.w3schools.com/jsref/event_onkeypress.asp），或者您可以自己构建一些插件。

Answer 2

它是

自动填充功能。这可以使用Jquery轻松完成。有一个很好的文档here。

以下示例。用您的50个公司名称替换下面的编程语言名称（在availableTags中）。如果您觉得在这里提供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>

Answer 3

只有HTML，结帐selectize.js。很可能这就是你要找的东西。

Answer 4

如果您只需要提供建议的文字输入，我会使用HTML5标准<datalist>。

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

带有搜索功能的HTML表单字段

4 个答案: