jQuery实现用户输入自动完成功能
jQuery实现用户输入自动完成功能
利用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">
<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);
});
}
});
});jQuery实现用户输入自动完成功能的更多相关文章
- jquery 实现邮箱输入自动提示功能：（二）
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 【原】ComboBoxety用户输入自动匹配
//在界面构造函数里加入下面两行代码 this.cbbDepartureAirport.AutoCompleteMode = System.Windows.Forms.AutoCompleteMode ...
- EditText(3)输入时自动完成功能
在android输入自动完成功能由EditText的子类 AutoCompleteTextView 实现.如下: 1,在xml中使用 <AutoCompleteTextView android: ...
- jquery+php实现用户输入搜索内容时自动提示
index.html <html> <head> <meta charset=;} #search_auto li a:hover{background:#D8D ...
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...
- JQuery输入自动完成
Combogrid 是一个jQuery插件用于为输入框添加高级自完成功能(auto-complete).当用户输入的时候,会在输入框的下方面动态显示一个拥有分页功能 的表格(Grid)控件. 通过Aj ...
随机推荐
- 201521123057 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
- lintcode.177 把排序数组转换为高度最小的二叉搜索树
把排序数组转换为高度最小的二叉搜索树 描述 笔记 数据 评测 给一个排序数组(从小到大),将其转换为一棵高度最小的排序二叉树. 注意事项 There may exist multiple val ...
- oracle 数据库管理--管理表空间和数据文件
一.概念表空间是数据库的逻辑组成部分.从物理上讲,数据库数据存放在数据文件中:从逻辑上讲,数据库数据则是存放在表空间中,表空间由一个或多个数据文件组成. 二.数据库的逻辑结构oracle中逻辑结构包括 ...
- 已被.NET基金会认可的弹性和瞬态故障处理库Polly介绍
前言 本节我们来介绍一款强大的库Polly,Polly是一种.NET弹性和瞬态故障处理库,允许我们以非常顺畅和线程安全的方式来执诸如行重试,断路,超时,故障恢复等策略. Polly针对对.NET 4. ...
- S2_SQL_第四章
1.使用EXISTS语句判断该数据库对象是否存在的语法: DROP TABLE IF EXISTS temp; 2. EXISTS作为WHERE语句的子查询: SELECT <字段>FRO ...
- 概率图论PGM的D-Separation(D分离)
目录[-] 本文大部分来自:http://www.zhujun.me/d-separation-separation-d.html 一.引言 二.三种情况分析 三.总结 四.应用例子 五.参考资料 其 ...
- Ansible(二) - 配置及命令简介
Ⅰ. Ansible Inventory Hosts文件配置 # mkdir /etc/ansible # touch /etc/ansible/hosts # cat /etc/hosts 127. ...
- 通过修改 LayoutInflater，全局替换字体！！！
序 在 Android 下使用自定义字体已经是一个比较常见的需求了,最近也做了个比较深入的研究. 那么按照惯例我又要出个一篇有关 Android 修改字体相关的文章,但是写下来发现内容还挺多的,所以我 ...
- 浪潮之巅——IT产业的三大定律
说实话除了小说以外,从来没有什么书能让我一口气看完,更不用说IT界的书了.但是吴军老师的<浪潮之巅>这本书除外,电子版的洋洋洒洒五百多页,我一下午就将其看完了.全书通过介绍AT&T ...
- SQLserver学习（四）——T-SQL编程之事务、索引和视图
今天来分享下T-SQL高级编程中的事务.索引.视图,可以和之前的SQL server系列文章结合起来. 一.事务 事务(TRANSACTION)是作为单个逻辑工作单元执行的一系列操作,这些操作作为一个 ...