欢迎来到资源库(www.zyku.net)

JavaScript

当前位置:首页 > 网页制作 > JavaScript > jQuery

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

时间:2017-02-17|栏目:JavaScript|点击:|我要投稿

利用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);
});
}
});
});

原文链接:http://www.cnblogs.com/summer7310/p/6394392.html

(资源库 www.zyku.net)

上一篇:js实现文本上下来回滚动

栏    目:JavaScript

下一篇:微信小程序 详解页面跳转与返回并回传数据

本文标题:jQuery实现用户输入自动完成功能

本文地址:https://www.zyku.net/js/507.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务