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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
Three.js基础部分学习
Jan 08 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
详解TypeScript的基础类型
Feb 18 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
destoon公司主页模板风格的添加方法
2014/06/20 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
python对字典进行排序实例
2014/09/25 Python
打包发布Python模块的方法详解
2016/09/18 Python
python之pandas用法大全
2018/03/13 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
会计学毕业生求职信
2014/06/25 职场文书
个人存款证明书
2014/10/18 职场文书
2014年超市工作总结
2014/11/19 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
MySQL 逻辑备份 into outfile
2022/05/15 MySQL