介绍 在 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); } }); } }); } );

　　推荐阅读

　　jquery加载页面的方法(页面加载完成就执行)

1、$(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here 　　}); }); 2、$(document).ready(function(){ 　　$("#a").click(function(){ 　　　　//adding your code here　　 　　}); >>>详细阅读

本文标题：jQuery UI AutoComplete 使用说明

地址：http://www.17bianji.com/kaifa2/JS/24506.html

 1/2    1