jQuery-自动完成/智能搜索插件

Question

I want to get a autocomplete function like this: http://www.nationalrail.co.uk/default.aspx . 我想要一个这样的自动完成功能： http : //www.nationalrail.co.uk/default.aspx 。

I want to provide full names as suggestions for the input-text like this 我想提供全名作为这样的输入文本的建议

Hannover (HAN) 汉诺威（HAN）

But after selecting a suggested entry I want to set only the three letters instead of the full name like this 但是在选择了建议的条目之后，我只想设置三个字母，而不是像这样的全名

HAN 韩

I already tried JQueryUI - Autocomplete but there is no opportunity to differ between the suggested names and the values which will be set after selecting an entry. 我已经尝试过JQueryUI-自动完成功能，但是没有机会在建议的名称和选择条目后设置的值之间进行区分。

I have an array like 我有一个像

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

Is there any package, module, framework which can do it? 是否有任何软件包，模块，框架可以做到？

Answer 1

You can Try this code snippet...Hope that this will help you. 您可以尝试使用此代码段...希望对您有所帮助。

This will be your HTML content and the corresponding script is also given... 这将是您的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>

The Script is Given Below 脚本如下

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

Hope that this will help you. 希望对您有帮助。

Answer 2

You will need Label and Id. 您将需要标签和ID。 Label is for text search and Id is to store your code. 标签用于文本搜索，而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>

jQuery-自动完成/智能搜索插件

问题描述

2 个解决方案

解决方案1
0 2018-02-27 13:23:49

解决方案2
0 2019-06-28 00:29:10

jQuery-自动完成/智能搜索插件

问题描述

2 个解决方案

解决方案1 0 2018-02-27 13:23:49

解决方案2 0 2019-06-28 00:29:10

解决方案1
0 2018-02-27 13:23:49

解决方案2
0 2019-06-28 00:29:10