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

    Error:Execution failed for task ':xutils:mergeDebugAndroidTestResources'. > No slave process to p ...

  2. Alice's Print Service

    Alice's Print Service Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice is providing print ser ...

  3. Object.preventExtensions()使用技巧

    Object.preventExtensions() 方法让一个对象变的不可扩展,也就是永远不能再添加新的属性. // Object.preventExtensions将原对象变的不可扩展,并且返回原 ...

  4. VC++ IPv6的支持

    最近根据项目需要,要在产品中添加对IpV6的支持,因此研究了一下IPV6的相关内容,Ipv6 与原来最直观的改变就是地址结构的改变,IP地址由原来的32位扩展为128,这样原来的地址结构肯定就不够用了 ...

  5. mongodb添加登陆验证

    mongodb添加登陆验证 转载地址 清空log,db目录 mongod --auth --logpath "D:\mongodb\log\log.log" --logappend ...

  6. 简单理解C#中的抽象工厂模式是什么概念！

    抽象工厂模式向客户端提供一个接口,使得客户端在不必指定具体类型的情况下,创建多个产品族中的对象.本文采取的仍然是接着以前的那个快餐店的例子.现在,快餐店经常良好,逐渐发展壮大,为了适合不同地方人的饮食 ...

  7. How to install the NVIDIA drivers on Ubuntu 18.04 Bionic Beaver Linux

    Objective The objective is to install the NVIDIA drivers on Ubuntu 18.04 Bionic Beaver Linux. This a ...

  8. kafka leader平衡策略

    1.1个partition的默认leader是replicas中的第一个replica 2.kafka controller会启动一个定时的check线程,kafka默认是5min周期,mafka是3 ...

  9. C语言函数指针（指向函数的指针）

    转载:http://c.biancheng.net/cpp/html/3248.html 一个函数总是占用一段连续的内存区域,函数名在表达式中有时也会被转换为该函数所在内存区域的首地址,这和数组名非常 ...

  10. 使用 Azure CLI 2.0 从自定义磁盘创建 Linux VM

    本文说明如何在 Azure 中上传自定义的虚拟硬盘 (VHD) 或复制现有 VHD,并从自定义磁盘创建 Linux 虚拟机 (VM). 可以根据要求安装并配置 Linux 分发版,并使用该 VHD 快 ...