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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
js中的this关键字详解
Sep 25 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vue-model实现简易计算器
Aug 17 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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 adodb操作mysql数据库
2009/03/19 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
thinkPHP查询方式小结
2016/01/09 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Python之文字转图片方法
2018/05/10 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Django choices下拉列表绑定实例
2020/03/13 Python
Python 必须了解的5种高级特征
2020/09/10 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
事业单位人员的自我评价范文
2014/09/21 职场文书
施工员岗位职责
2015/02/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python