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 相关文章推荐
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
微信小程序左滑删除实现代码实例
Sep 16 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
paypal即时到账php实现代码
2010/11/28 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python3实现生成随机密码的方法
2014/08/23 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python变量的存储原理详解
2019/07/10 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
幼儿园法制宣传日活动总结
2014/11/01 职场文书
担保书格式
2015/01/20 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python