Question

您好我正在尝试为下拉列表或选择 html表单元素创建auto completion功能。

我需要一个功能，例如一旦用户在typing元素上启动drop-down/select，根据它match able元素将以所选元素的形式出现特定下拉/选择项目。

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

Answer 1

您可以使用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 2

您可以尝试使用HTML <datalist>标记进行自动完成下拉列表。 Try here

<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>

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

Answer 3

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

link：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

使用bootstrap的最简单的可搜索下拉列表：

<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>

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

5 个答案: