JQuery -自动完成/ smartSearch插件
JQuery -自动完成/ smartSearch插件
提问于 2018-02-27 18:07:16
我想获得一个自动补全函数，如下所示：http://www.nationalrail.co.uk/default.aspx。
我想提供全名作为输入的建议-文本如下
汉诺威(韩文)
但是在选择一个建议的条目后，我想只设置三个字母，而不是全名，如下所示
HAN
我已经尝试过JQueryUI - Autocomplete，但是没有机会在建议的名称和将在选择条目后设置的值之间存在差异。
我有一个像这样的数组
[
["Hannover", "HAN"],
["Frankfurt", "FRA"],
...
]有没有什么包，模块，框架可以做到这一点？
回答 2
Stack Overflow用户
发布于 2018-02-27 21:23:50
您可以尝试此代码snippet...Hope，这将对您有所帮助。
这将是您的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
});
} );希望这能对你有所帮助。
Stack Overflow用户
发布于 2019-06-28 08:29:10
您将需要标签和Id。Label用于文本搜索，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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49006022
复制相关文章
相似问题