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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
js 图片轮播(5张图片)
Dec 30 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
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
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
js获取页面description的方法
2015/05/21 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python中title()方法的使用简介
2015/05/20 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python内建模块struct实例详解
2018/02/02 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
Java中实现多态的机制是什么?
2014/12/07 面试题
试述DBMS的主要功能
2016/11/13 面试题
晚归检讨书
2014/02/19 职场文书
营销与策划实训报告
2014/11/05 职场文书