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

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  2. springboot1.5.10兼容高版本6.1.1elasticsearch

    1.引入依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elastic ...

  3. 建造者（生成器）模式C++、Java实现

    1.建造者模式UML 图1. 建造者模式UML 2.C++实现 C++实现类视图: 图2. 建造者模式C++实现的类视图 其中,Product的实现代码是(ProductA和ProductB的代码不再 ...

  4. wamp配置步骤

    对于初做PHP网站的朋友来说,第一步肯定是希望在自己电脑是搭建PHP环境,省去空间和上传的麻烦!但搭建环境也不是件容易的事情,特别是对于新手同学来说!因此在这里跟大家介绍我作为一名新手在使用的方便好用 ...

  5. nodejs繁琐地自建路由

    一.繁琐的自建路由 app.js var server = require('./server'); server.startServer(); server.js var http = requir ...

  6. 20个实用的javascript技巧及实践（一）

    在本篇文章中,我们将会向大家分享JavaScript开发中的小技巧.最佳实践和实用内容,不管你是前端开发者还是服务端开发者,都应该来看看这些编程的技巧总结,绝对会让你受益匪浅的. 文中所提供的代码片段 ...

  7. (转）快速了解微信小程序的使用，一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  8. Windows API-----top level window

    原文地址: http://blog.163.com/cumt_xl/blog/static/19071504420136911838683/ Q: What is a top-level window ...

  9. 《火星救援》NASA惊现lisp

    duang-跳出个界面上面一个lisp程序.

  10. python numpy+mkl+scipy win64 安装

    用pip在windows下安装numpy,scipy等库时一般来说都不会很顺利比较好的方式是自己下载对应的whl文件pip install 话不多说上链接 http://www.lfd.uci.edu ...