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


Posted in Javascript onFebruary 13, 2017

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

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

Javascript 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 #Javascript
微信小程序 this和that详解及简单实例
Feb 13 #Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
jQuery实现大图轮播
Feb 13 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python随机数random模块使用指南
2016/09/09 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
flask session组件的使用示例
2018/12/25 Python
超实用的 30 段 Python 案例
2019/10/10 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
家长对老师的评语
2014/04/18 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
平面设计师岗位职责
2014/09/18 职场文书
督导岗位职责
2015/02/04 职场文书
2015年药房工作总结
2015/04/25 职场文书
党员进社区活动总结
2015/05/07 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android