百度 酷狗,反正使用搜索功能时,都会看到类似于图一这种自动补全的功能,灰常的方便,今天做一个项目,刚好要加这个功能,于是一通百度之后,总算做出来,源代码在文章末尾会提供下载。还有,我这个是参考了网上的一篇文章写出来的,比较简单,可以先看一下这个网址: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[].Rows.Count;

        for (i = ; i < j; i++)

        {

            DataRow dr = ds.Tables[].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源码

AutoComplete的使用方法的更多相关文章

  1. [Jquery] Jquery AutoComplete的使用方法实例

    jQuery的Autocomplete(自动完成.自动填充)插件 jquery-autocomplete配置: <script type="text/javascript" ...

  2. Jquery AutoComplete的使用方法实例

    jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...

  3. .net 事务处理的三种方法

    方法1:直接写入到sql 中 在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRANS 实现 begin trans declare@orderDetail ...

  4. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  5. JqueryUI学习笔记-自动完成autocomplete

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

    Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox ...

  7. [译]kendoui - 方法和事件

    原文 为了使用方法和事件,首先要获取到widget实例. 获取widget 一共有3种获取widget的方式. jQuery的data方法 将widget的名作为参数传给jQuery的data方法.( ...

  8. JQuery UI之Autocomplete(3)属性与事件

    1.Autocomplete的属性 首先引入css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel=&qu ...

  9. asp.net三种方法实现事务

    事务处理是在数据处理时经常遇到的问题,经常用到的方法有以下三种总结整理如下:方法1:直接写入到sql 中在存储过程中使用 BEGIN TRANS, COMMIT TRANS, ROLLBACK TRA ...

随机推荐

  1. 导出maven项目依赖的jar包

    注意使用mvn命令是需要配置好maven的环境变量 一.导出到自定义目录中 在maven项目下创建lib文件夹,输入以下命令: mvn dependency:copy-dependencies -Do ...

  2. 关于利用MQ实现分布式事务的想法【转】

    转自:https://www.jianshu.com/p/bafb09954f18 假设:消息服务不丢消息 场景 服务A 服务B 服务C 消息服务Q 伪代码 服务A中 transaction{ A本地 ...

  3. node.js之内存机制特性

    Node.JS的V8引擎具有垃圾回收机制与内存限制的特性,V8的内存限制:64位系统约为1.4GB.32位系统约为0.7GB:V8采用基于分代式垃圾回收机制,堆内存结构分为新生代和老生代,新生代达到一 ...

  4. 04_ActiveMQ事务与三种签收方式

    [ActiveMQ添加事务] 添加事务主要注意两点: 1.修改Session配置,启用事务 /** * 3.通过Connection对象创建Session会话(上下文环境对象),用于接收消息. * 参 ...

  5. PeekMessage&GetMessage

    原文:http://www.cnblogs.com/faceang/archive/2010/05/25/1743757.html PeekMessage与GetMessage的对比相同点:PeekM ...

  6. Win7下VC++6.0打开文件报错导致其崩溃的解决办法

    原文:http://blog.csdn.net/wanghaihao_1/article/details/39005771 在Windows7下安装Visual C++ 6.0后,遇到一个致命的问题打 ...

  7. Android MediaPlayer播放音乐并实现进度条

    提前工作,往sd卡里放音乐文件 1.布局文件main.xml <?xml version="1.0" encoding="utf-8"?> < ...

  8. 二维码Zxing&Zbar

    二维码Zxing&Zbar 前言:该项目主要介绍了二维码扫描.闪光灯开启.本地二维码图片识别.二维码生成.分别是zxing和zbar(网格二维码)分别实现,具体效果运行项目apk... 开发环 ...

  9. idea 安装findBugs 和 checkStyle

    1.fiindBugs是一款 静态分析工具,检查程序潜在bug,在bug报告中快速定位到问题的代码上.在idea下面安装很简单可以参考 http://zhongmin2012.iteye.com/bl ...

  10. WCF传输协议

    典型传输协议下的(1)HTTP和HTTPSHTTPS(安全超文本传输协议).它是为了在WWW上解决安全的数据传输而设计的.HTTS是采用了SSL的HTTP,SSL是一种加密协议.它们默认的端口号分别是 ...