AutoComplete的使用方法

百度酷狗,反正使用搜索功能时,都会看到类似于图一这种自动补全的功能,灰常的方便,今天做一个项目,刚好要加这个功能,于是一通百度之后,总算做出来,源代码在文章末尾会提供下载。还有,我这个是参考了网上的一篇文章写出来的,比较简单,可以先看一下这个网址:jquery.autocomplete.js的简单用法,这个基本看完都会的了,会了的话,就不必看下去了.

AutoComplete的使用方法

图一

如果上面的链接挂了打不开的话,可以接着往下看.

准备工作:

1、要下载一个jquery.autocomplete.js(网上多得很,可以自己上网上下载),下载完以后,把它引到需要使用自动补全功能的页面当中.

2、它是基于jquery的,随便引入一个jquey.js文件即可,这棵大白菜我就不提供了.

做完上面两步之后,可以正式开始了.

1.新建一个页面 AutoComplete.aspx,然后在<head></head>标签中加入如下代码(其中txtUserName为需增加自动补分功能的textbox控件ID,而AutoComplete.ashx为后台ajax调用的处理页面):

<script type="text/javascript">
$(function() {
     $("#txtUserName").autocomplete("Ajax/AutoComplete.ashx"); //由ashx取得资料
});
</script>

2.这样,上面的页面就会在每次输入了文字后自动把轮入框的内容以get的方式传至AutoComplete.ashx页面进行处理,具体的请求URL为:Ajax/AutoComplete.ashx?q=[你所入的内容];这是默认的方式,而且只能传一个值,当你需要传其它值时,上面的写法就不能满足你的需要了.多参数的可以这样子写(我原文复制了过来,只看红色的就可以了,其它的可以自己发挥).

<script type="text/javascript">
$(document).ready(function() {
        $("#<%=txtUserName.ClientID %>").autocomplete("Ajax/AutoComplete.ashx", {             width: 155,
            selectFirst: true,
            autoFill: true,
            minChars: 0,
            scroll: true,
            mustMatch: true,
            extraParams: { a: "1", b: "2", c: "3"} //此处实际请求的URL为"Ajax/AutoComplete.ashx?q='[你在txtUserName中输入的值]'&a=1&b=2&c=3"

            //BUG   ---begin
            //此处报错,灰常的无语,日后有时间再验证.
            //formatItem: function (row, i, max) {
            //    return "<td align='left'>{0}</td><td align='right'>{1}</td>".format(row[0], row[1]);
            //}
            //BUG   ---end
 }        );
       });

        String.prototype.format = function() { //String 格式化
            var arg = arguments;
            return this.replace(/\{(\d+)\}/g, function(i, m) {
                return arg[m];
            });
        }
      
    </script>

像上面这样子,就能够传其它值了,你可以用$("#[ID]").val()来选取你需要的控件的值.这样子,基本上的需求都足够了.

3.用户界面做完了以后,在数据库中新增一张表格,随你的便,可以参考下图(表名为:test):

AutoComplete的使用方法

图二

4.表建完以后,新建一个后台处理的页面:AutoComplete.ashx ,我直接把完整的代码片断贴出来好了,老规矩,看红字.

<%@ WebHandler Language="C#" class="AutoComplete" %>

using System;
using System.Web;
using System.Data;

public class AutoComplete : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";  //这是新建的时候默认就在的,好像是指定Response的什么类型之类的,不管它.
        GetAutoComplete(context);  //调用方法
    }
    
    private void GetAutoComplete(HttpContext context)     {
        OraDbHelper helper = new OraDbHelper();     //实例化数据操作类
         string a = context.Request.QueryString["a"].ToString();
        string b = context.Request.QueryString["b"].ToString();
        string c = context.Request.QueryString["c"].ToString();
        string q = context.Request.QueryString["q"].ToString();

        string sql = "Select * From test Where userName like '" + q + "%'";
        DataSet ds = helper.getDS(sql);
        int i, j;
        j = ds.Tables[0].Rows.Count;
        for (i = 0; i < j; i++)
        {
            DataRow dr = ds.Tables[0].Rows[i];
            context.Response.Write(string.Format("{0}\n", dr["userName"])); //这个就是我们输入文字后,界面自动带出来的选择列表信息,你可以绑数据库,也可以自定义
        }
    }


    //下面这些是系统自带的,不用理也不能删掉它们,否则报错.
    public bool IsReusable {
        get {
            return false;
        }
    }

}

5.好了,做完这一步之后,直接按F5看一下页面的效果吧,如图三,那些下自动补全的CSS样式可以自己修改(路径:css/jquery.autocomplete.css),文件网上面也有,我这个是公司里面改好的,看起来还不错,我直接用了.呵呵.

AutoComplete的使用方法

图三

6.资源下载(数据库我就不上传了,记得修改一下SqlConnectionString这个鸟就可以了,随便新建个数据库,添加一张表,这个木有问题吧...)

附件:AutoComplete源码

秒客网

AutoComplete的使用方法

相关文章