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

    Erlang本身对进程数,原子长度等没有限制,但为了提高性能和节省内存,总会在实际实现中和运行环境中作出一些限制. 1.进程数量 缺省情况下同时存在的最大Erlang进程数量不超过2^18=26214 ...

  2. shell脚本报错 value too great for base

    此错误是shell脚本在计算以0开头的数字时,默认以8进制进行计算,导致在计算08时超过了8进制的范围,报此错误. shell脚本代码如下: #!/bin/bash a= ..} do a=$[$a+ ...

  3. HDU4336：Card Collector(min-max容斥)

    题面 传送门 Sol 方法一 直接状压就好了 # include <bits/stdc++.h> # define RG register # define IL inline # def ...

  4. File中mkdir()和mkdirs()的区别

    mkdir() 创建此抽象路径名指定的目录.只能在已经存在的目录中创建文件夹 如: File folder = new File("d:\\test1\\test2"); fold ...

  5. vue2.0中的ref.html

    前置知识请戳这里 获取DOM对象以及组件对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  6. windows c++ 修改用户的文件夹操作权限

    一般Windows下的系统文件(夹)只让受限帐户读取而不让写入和修改.如果要开启写操作权限就需要手动修改文件(夹)的用户帐户安全权限(这操作当然要在管理员帐户下执行).以下用程序封装了一下该操作: # ...

  7. idea 多项目部署JRebel

    碰到个问题,Jrebel热部署Idea,两个项目一个可以热部署,一个不行.刚开始发现是其中一个项目没有添加JRebel,于是加上 然而发现还是不行,继续google, 在一篇文章里面发现如下的内容: ...

  8. c# BackGroundWorker 多线程操作的小例子 (转)

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  9. pt-variable-advisor（percona toolkit）

    pt-variable-advisor是一款分析参数,并且给出参数设置建议的一款PT工具,基本语法 pt-variable-advisor [OPTIONS] [DSN] 如下我们可以获取本地参数的一 ...

  10. javascript 时间日期处理相加，减操作方法js

    javascript 时间日期处理相加,减操作方法js function dateAddDays(dataStr,dayCount){ var strdate = dataStr; // 2017年0 ...