jQuery实现用户输入自动完成功能
利用jQueryUI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。
1.最简单的用户输入自动完成
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>jQueryUIAutocomplete-Defaultfunctionality</title>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"rel="externalnofollow">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function(){
//定义并初始化字典库数据源集合
varavailableTags=[
"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>
</head>
<body>
<divclass="ui-widget">
<labelfor="tags">请输入:</label>
<inputid="tags">
</div>
</body>
</html>
2使用远程数据源自动完成
Auto-complete插件不光可以实现本地数据源的自动完成，也可以读取远程的数据源，列如实现从服务器端读取数据源信息。
通过将服务器数据缓存到浏览器中，获取的数据源首先保存在cache变量中。
$(function(){
//自定义缓存变量
varcache={};
//自动完成插件函数
$("#tags").autocomplete({
//定义用户最少输入的字符数
minLenght:2,
source:function(request,response){//定义远程获取数据源函数
varterm=request.term;//定义用户请求信息变量
if(termincache){//判断请求数据是否存在缓存中
response(cache[term]);//真，从缓存中读取数据
return;
}
$.getJSON('data.json',request,function(data,Status,xhr){
cache[term]=data.result;//缓存远程数据
response(data.result);
});
}
});
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！