jQuery Autocomplete

     自动完成给我们带来了便捷的操作，这一点你完全可以在Google Sggestions得到充分的验证。下面荐一个jQuery下的自动提示插件jQuery Autcomplete plug-in，帮你完成自己的提示效果。
很简单，分三步即可完成：
1.当然首先你要拥有一个jQuery，下载jquery.autocomplete.js 、jquery.autocomplete.css、

由于中文问题，需要修改jquery.autocomplete.js代码，将encodeURI修改为escape。

2.在你要实现自动提示的文本框(ID=txtRealName)下嵌入如下代码：

$(document).ready(function() {
  $("#txtRealName").autocomplete(
    "AutoName.aspx",
    {
        delay: 10, 
        minChars: 1,
        matchSubset: 1,
        matchContains: 1,
        cacheLength: 10,
        onItemSelect: selectItem,
        onFindValue: findValue,
        formatItem: formatItem,
        autoFill: true
     }
   );
 });

function findValue(li) { 
   if( li == null ) return alert("No match!");  
   // if coming from an AJAX call, let's use the CityId as the value  
   if( !!li.extra ) var sValue = li.extra[0];  
   // otherwise, let's just display the value in the text box   
   else var sValue = li.selectValue;
   //alert("The value you selected was: " + sValue);

}

function selectItem(li) {
    findValue(li);
}

function formatItem(row) { 
   return row[0];  
   //return row[0] + " (id: " + row[1] + ")"
   //如果有其他参数调用row[1]，对应输出格式Sparta|896

}

function lookupAjax() {
   var oSuggest = $("#txtRealName")[0].autocompleter;
   oSuggest.findValue();
   return false; 
}

3.在上面JS所请求的页面下实现如下输出效果：

AutoName.aspx代码：

 protected void Page_Load(object sender, EventArgs e) 
    { 
        if (!this.IsPostBack) 
        { 
            if (Request.QueryString["q"] != null && Request.QueryString["q"] != "") 
            { 
                Response.Clear(); Response.Charset = "utf-8"; 
                Response.Buffer = true; 
                this.EnableViewState = false;
                Response.ContentEncoding = System.Text.Encoding.UTF8; 
                Response.ContentType = "text/plain"; 
                Response.Write(GetLikeUserName(Request.QueryString["q"])); 
                Response.Flush(); 
                Response.Close(); 
                Response.End(); 
            } 
        } 
    }  
    private String GetLikeUserName(String namestr) 
    {
        List<UserInfos> userinfos; = BLL.UserInfosBLL.GetLikeUserinfo(namestr); 
        StringBuilder sbstr = new StringBuilder();
        for (int i = 0; i < userinfos.Count; i++)
        { 
            sbstr.Append(userinfos[0].RealName); sbstr.Append("\n");
        } 
        return sbstr.ToString();
    }

最后图片效果：

官方网址：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
注：感觉上面提供的jquery.autocomplete.js 不是想像中的好用，即不是想要的摸索方式，还是到官方去下载吧！！！！
默认情况下，官方版是不支持中文的，没关系，我们找到源文件的ajax方法：

            $.ajax({
                // try to leverage ajaxQueue plugin to abort previous requests
                mode: "abort",
                // limit abortion to this input
                port: "autocomplete" + input.name,
                dataType: options.dataType,
                url: options.url,
                data: $.extend({
                    //q: lastWord(term),
                    q: lastWord(escape(term)),
                    limit: options.max
                }

如上代码所示，把

q: lastWord(term)

改成

q: lastWord(escape(term))

即可，然后在aspx访问数据库文件中用Server.UrlDecode()来解码，即

Server.UrlDecode( Request.QueryString["q"])