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 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
JS实现的几个常用算法
Nov 12 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JSONP解决JS跨域问题的实现
May 25 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出错界面
2006/10/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
vue cli升级webapck4总结
2018/04/04 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
表扬信范文
2015/05/04 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
nginx日志格式分析和修改
2022/04/28 Servers