jQuery UI AutoComplete 使用说明


Posted in Javascript onJune 20, 2011

介绍
在 jQuery UI 的最近更新中增加了自动完成控件 AutoComplete,这为我们提供了又一个强大的开发工具,这里介绍一下这个控件的使用方式。
首先,jQuery UI 是基于 jQuery 的,所以,必须在你的页面中首先引用 jQuery 脚本库,然后再引用 jQuery UI 库,对于 jQuery UI 库来说,可以引用整个的库,也可以仅仅引用当前页面用到的库。
jQuery UI 的下载地址:http://jqueryui.com/download
一.基本配置
一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于 autocomplete 来说,涉及到下面的几个脚本文件。

<script src="jquery-1.5.1.min.js" type="text/javascript"></script> 
<script src="jquery.ui.core.js"></script> 
<script src="jquery.ui.widget.js"></script> 
<script src="jquery.ui.position.js"></script> 
<script src="jquery.ui.autocomplete.js"></script>

页面中当然要有一个输入框.
<div class="demo"> 
<div class="ui-widget"> 
<label for="tags"> 
Tags: 
</label> 
<input id="tags" type="text"> 
</div> 
</div>

二. 使用本地数据 对于使用来说,基本的使用非常简单,提示的数据可以来自数组。通过参数对象的 source 属性设置数据源。
<script type="text/javascript"> 
$(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" 
]; 
// 这里使用数组作为数据源,availableTags 是数组的名称 
$("#tags").autocomplete({ 
source: availableTags 
}); 
}); 
</script>

现在,一个自动完成的效果已经可以工作了。

三.使用远程数据源
还可以为 source 属性设置一个表示远程地址的字符串,通过这个远程地址来获取 json 数据。
对于 autocomplete 来说,当提供一个地址的时候,在用户开始在输入框中输入时,将会向这个地址发出一个 GET 请求,请求中的参数名为 term 的参数表示当前输入的内容,
返回的结果必须是 json 格式的数据。
JSON 的详细说明参加这里:http://www.json.org/json-zh.html

var url = "serviceHandler.ashx"; 
$("#auto").autocomplete( 
{ 
source: url 
} 
);

我们可以通过一个一般处理程序来返回数据。需要特别注意的是,返回的串必须符合 JSON 格式要求,字符串必须使用双引号。
public class serviceHandler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
HttpResponse response = context.Response; 
System.IO.TextWriter writer = response.Output; 
// 注意,必须是标准的 JSON 格式串,必须使用双引号 
writer.Write("[\"One\", \"Two\", \"Three\"]"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

通常在使用远程数据的时候,我们希望在用户输入几个字符之后,再进行提示,这可以通过 minLength 属性来设置,如果是本地数据源,通常为 0, 对于远程数据源,或者大量数据的情况,应当适当增加这个值。这样,我们的脚本就成为了下面的样子了。
var url = "serviceHandler.ashx"; 
$("#auto").autocomplete( 
{ 
source: url, 
minLength: 2 
} 
);

四. 带有缓存的远程数据源
通过为 source 提供一个函数,我们可以为远程数据增加一个本地的缓存。这样就不必每次都到服务器中进行查询。
$(function () { 
var url = "serviceHandler.ashx"; 
var cache = {}, lastXhr; 
$("#auto").autocomplete({ 
minLength: 2, 
source: function (request, response) { 
var term = request.term; 
if (term in cache) { 
response(cache[term]); 
return; 
} 
lastXhr = $.getJSON(url, request, function (data, status, xhr) { 
cache[term] = data; 
if (xhr === lastXhr) { 
response(data); 
} 
}); 
} 
}); 
} 
);
Javascript 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 #Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 #Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 #Javascript
jQuery调用WebService的实现代码
Jun 19 #Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 #Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 #Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 #Javascript
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python连接mysql数据库的正确姿势
2016/02/03 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python学习开发mock接口
2019/04/28 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
教师档案管理制度
2014/01/23 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
社区母亲节活动方案
2014/03/05 职场文书
市场部经理岗位职责
2014/04/10 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书