JQuery - 自动完成/智能搜索插件答案

【问题标题】：JQuery - Autocomplete / smartSearch PluginJQuery - 自动完成/智能搜索插件
【发布时间】：2018-02-27 10:07:15
【问题描述】：

我想获得这样的自动完成功能：http://www.nationalrail.co.uk/default.aspx。

我想为这样的输入文本提供全名作为建议

汉诺威 (HAN)

但是在选择一个建议的条目后，我只想设置三个字母而不是这样的全名

韩

我已经尝试过JQueryUI - Autocomplete，但没有机会区分建议的名称和选择条目后将设置的值。

我有一个类似的数组

[
  ["Hannover", "HAN"],
  ["Frankfurt", "FRA"],
  ...
]

有什么包、模块、框架可以做到吗？

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

你可以试试这个代码 sn-p...希望这对你有帮助。

这将是您的 HTML 内容，并且还会给出相应的脚本...

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

<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
    });
  } );

希望对您有所帮助。

【讨论】：

【解决方案2】：

您将需要标签和 ID。标签用于文本搜索，ID 用于存储您的代码。

<!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>
  <script>
  $( function() {
    var data = [
        {"id":"HAN","label":"Hannover [HAN]"},
        {"id":"FRA","label":"Frankfurt [FRA]"},
    ]
    $( "#search" ).autocomplete({
      source: data,
      select: function(event, ui) {
                $('#code').val(ui.item.id);
      },
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <input type="text" id="search">
  <input type="text" id="code"> <!-- change to type="hidden" -->
</div>
</body>
</html>

【讨论】：