jQuery Autocomplete

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiantuwuliang/archive/2009/09/04/1560072.html

文章标签：

#javascript #数据库 #ViewUI

本文介绍如何使用jQuery Autocomplete插件实现文本框自动提示功能。主要包括：1) 插件下载及配置；2) JavaScript代码实现；3) 后端处理及数据返回格式。通过简单三步即可轻松实现。

自动完成给我们带来了便捷的操作，这一点你完全可以在 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 " ])

转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/09/04/1560072.html