AutoComplete的使用方法

时间 2019-11-19

标签 autocomplete 使用方法繁體版

原文原文链接

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

图一css

若是上面的连接挂了打不开的话,能够接着往下看. html

准备工做:java

一、要下载一个jquery.autocomplete.js(网上多得很,能够本身上网上下载),下载完之后,把它引到须要使用自动补全功能的页面当中.jquery

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

作完上面两步以后,能够正式开始了.ajax

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

<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()来选取你须要的控件的值.这样子,基本上的需求都足够了.this

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

图二

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),文件网上面也有,我这个是公司里面改好的,看起来还不错,我直接用了.呵呵.

图三

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

附件:AutoComplete源码