blocks|key|2843643|text|您可以尝试此代码snippet...Hope，这将对您有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843644|这将是您的HTML内容，相应的脚本也会给出...|2843645|<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>|code-block|syntax|javascript|2843646|脚本如下所示|2843647|$(+function()+{
++++var+availableTags+=+[
++++++"ActionScript",
++++++"AppleScript",
++++++"Asp",
++++++"BASIC",
++++++"C",
++++++"C%2B%2B",
++++++"Clojure",
++++++"COBOL",
++++++"ColdFusion",
++++++"Erlang",
++++++"Fortran",
++++++"Groovy",
++++++"Haskell",
++++++"Java",
++++++"JavaScript",
++++++"Lisp",
++++++"Perl",
++++++"PHP",
++++++"Python",
++++++"Ruby",
++++++"Scala",
++++++"Scheme"
++++];
++++$(+"#tags"+).autocomplete({
++++++source:+availableTags
++++});
++}+);|2843648|希望这能对你有所帮助。|2843649|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can Try this code snippet...Hope that this will help you.</p>

<p>This will be your HTML content and the corresponding script is also given... </p>

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

&lt;div class="ui-widget"&gt;
  &lt;label for="tags"&gt;Tags: &lt;/label&gt;
  &lt;input id="tags"&gt;
&lt;/div&gt;
</code></pre>

<p>The Script is Given Below</p>

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

<p>Hope that this will help you.</p>


blocks|key|101124|text|您将需要标签和Id。Label用于文本搜索，Id用于存储代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|101125|<!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">+
</div>
</body>
</html>|code-block|syntax|javascript|101126|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You will need Label and Id. Label is for text search and Id is to store your code. </p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;jQuery UI Autocomplete - Default functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;


&lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $( 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);
      },
    });
  } );
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

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


<p>I want to get a autocomplete function like this: <a href="http://www.nationalrail.co.uk/default.aspx" rel="nofollow noreferrer">http://www.nationalrail.co.uk/default.aspx</a>.</p>

<p>I want to provide full names as suggestions for the input-text like this</p>

<blockquote>
  <p>Hannover (HAN)</p>
</blockquote>

<p>But after selecting a suggested entry I want to set only the three letters instead of the full name like this</p>

<blockquote>
  <p>HAN</p>
</blockquote>

<p>I already tried <a href="https://jqueryui.com/autocomplete/" rel="nofollow noreferrer">JQueryUI - Autocomplete</a> but there is no opportunity to differ between the suggested names and the values which will be set after selecting an entry.</p>

<p>I have an array like</p>

<pre><code>[
  ["Hannover", "HAN"],
  ["Frankfurt", "FRA"],
  ...
]
</code></pre>

<p>Is there any package, module, framework which can do it?</p>


JQuery - Autocomplete / smartSearch Plugin

jQuery

Python

Erlang

Java

Perl

我想获得一个自动补全函数，如下所示：。我想提供全名作为输入的建议-文本如下汉诺威(韩文)但是在选择一个建议的条目后，我想只设置三个字母，而不是全名，如下所示 HAN我已经尝试过，但是没有机会在建议的名称和将在选择条目后设置的值之间存在差异。我有一个像这样的数组[  ["Hannover", "HAN"],  ["Fra...

问JQuery -自动完成/ smartSearch插件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery -自动完成/ smartSearch插件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery -自动完成/ smartSearch插件
EN