如何通过 HTML 下拉或选择元素实现自动完成功能？

Question

嗨，我正在尝试为下拉菜单或选择html 表单元素创建auto completion功能。

我需要一个功能，比如一旦用户开始在drop-down/select元素上typing ，根据它的可match able元素就会以特定下拉/选择项目的选定元素的形式出现。

任何人都知道我如何实现这一目标？

Answer 1

您可以尝试使用 HTML <datalist>标记自动完成下拉列表。 试试这里。

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

如果您不想在下拉列表或未选择的下拉列表中添加默认值，请从输入标签中删除 value 属性。

Answer 2

您可以使用 jQuery select2 插件。 它只是让HTML选择框自动完成： Select2

<link 
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" 
rel="stylesheet" />
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script 

src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".js-example-basic-multiple").select2();
});
</script>

<select class="js-example-basic-multiple" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

Answer 3

有很多选择，我用过 Selectize.js 和 Select2。 我发现 Select2 更好，更易于使用，而且重量轻！ 使用 ajax 调用也很容易更新（例如：搜索城市、国家/地区、用户等...）

链接： http : //selectize.github.io/selectize.js/

查看下面的示例：

 $(function() { $('select') .select2({ placeholder: 'type now...', width: '200', multiple: true, data: [{ id: 'A & A, LLC.', text: 'A & A, LLC.' }, { id: 'testing1', text: 'testing1' }, { id: 'testing 1,2,3', text: 'testing 1,2,3' }], tokenSeparators: ['|'] }) .on('change', function() { console.log($(this).val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> <select></select>

Answer 4

使用引导程序的最简单的可搜索下拉列表：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <select class="selectpicker" data-live-search="true" > <option>Alabama</option> <option>Alaska </option> <option>Arizona </option> <option>Arkansas </option> <option>California </option> <option>Colorado </option> <option>Connecticut </option> <option>Delaware </option> <option>Florida </option> <option>Georgia </option> <option>Hawaii </option> <option>Idaho </option> <option>Illinois Indiana </option> <option>Iowa </option> <option>Kansas </option> <option>Kentucky </option> <option>Louisiana </option> <option>Maine </option> <option>Maryland </option> <option>Massachusetts </option> <option>Michigan </option> <option>Minnesota </option> <option>Mississippi </option> <option>Missouri </option> <option>Montana Nebraska </option> <option>Nevada </option> <option>New Hampshire </option> <option>New Jersey </option> <option>New Mexico </option> <option>New York </option> <option>North Carolina </option> <option>North Dakota </option> <option>Ohio </option> <option>Oklahoma </option> <option>Oregon </option> <option>Pennsylvania Rhode Island </option> <option>South Carolina </option> <option>South Dakota </option> <option>Tennessee </option> <option>Texas </option> <option>Utah </option> <option>Vermont </option> <option>Virginia </option> <option>Washington </option> <option>West Virginia </option> <option>Wisconsin </option> <option>Wyoming</option> </select> <!-- Post Info --> <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> Find documentation: <a href='http://getbootstrap.com/css/'> Get Bootstrap 3 </a><br/> Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'> Bootstrap 3 Skeleton </a><br/> </div>

Answer 5

这可以通过简单的方式实现。 来自以下库的参考https://jqueryui.com/autocomplete/

使用 cdn 链接导入以下标头

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

加载包含数据的数组

 <script>
  $( function() {
    var availableTags = [
      "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>

创建输入字段

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

完整代码

 $( function() { var availableTags = [ "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 }); } );

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>