jquery ui autocomplete

原文地址：http://www.cnblogs.com/haogj/archive/2011/06/18/2078245.html

使用 jQuery UI AutoComplete

介绍

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