autocomplete.js 输入框，自动提示

来源：互联网发布：西科软件编辑：程序博客网时间：2024/06/06 05:56

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

图一

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

准备工作:

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):

图二

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这个鸟就可以了,随便新建个数据库,添加一张表,这个木有问题吧...)

0 0