欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现用户输入自动完成功能

程序员文章站 2023-11-28 10:03:40
利用jquery ui中auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字...

利用jquery ui中auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。

1.最简单的用户输入自动完成

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jquery ui autocomplete - default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script>
 $(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
 });
 });
 </script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">请输入: </label>
 <input id="tags">
</div>
</body>
</html>

2 使用远程数据源自动完成

auto-complete插件不光可以实现本地数据源的自动完成,也可以读取远程的数据源,列如实现从服务器端读取数据源信息。

通过将服务器数据缓存到浏览器中,获取的数据源首先保存在cache变量中。

 $(function() {
 //自定义缓存变量
 var cache = {};
 //自动完成插件函数
 $("#tags").autocomplete({
 //定义用户最少输入的字符数
 minlenght: 2,
 source: function(request, response){//定义远程获取数据源函数
 var term = request.term;//定义用户请求信息变量
 if(term in cache) {//判断请求数据是否存在缓存中
 response(cache[term]);//真,从缓存中读取数据
 return;
 }
 $.getjson('data.json', request, function(data, status, xhr) {
 cache[term] = data.result;//缓存远程数据
 response(data.result);
 });
 }
 });
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!