首先当然是去下载JQuery UI ,这里这里是下载地址http://jqueryui.com/

第一步是点击这里

第二步选择你想要下载的主题进行下载

我这里是选择的cupertino主题包

点击圆圈里的Download进行下载，此时页面会跳转到一个让您进行控件和版本筛选的页面，因为我只需要autocomplate，其他不需要，所以只选择这里控件

当然你也可以全选！

然后就是在页面中引用了，这里我直接贴出代码，详细怎么引用自己看就可以了，代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Base.css" rel="stylesheet" type="text/css" />
    <link href="js/jquery-ui-1.9.2.custom/css/cupertino/jquery-ui-1.9.2.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
    <style type="text/css">
        .ui-autocomplete-loading
        {
            background: white url('img/ui-anim_basic_16x16.gif') right center no-repeat;
        }
        #city
        {
            width: 25em;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //缓存
            var cache = {};
            $("#txtMajor").autocomplete({
                source: function (request, response) {
                    var term = request.term;
                    if (term in cache) {
                        response($.map(cache[term], function (item) {
                            return {
                                label: item.xk_name + '---' + item.xk_code,
                                value: item.xk_name
                            }
                        }));
                        return;
                    }
 
                    $.ajax({
                        url: "service/GetJsonData.ashx",
                        dataType: "json",
                        data: {
                            searchDbInforItem: request.term
                        },
                        success: function (data) {
                            cache[term] = data;
                            response($.map(data, function (item) {
                                return {
                                    label: item.xk_name + '---' + item.xk_code,
                                    value: item.xk_name
                                }
                            }));
                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    $("#hidMajorName").val("");
                    $("#hidMajorCode").val("");
                    var strs = ui.item.label.split("---");
                    $("#hidMajorName").val(strs[0]);
                    $("#hidMajorCode").val(strs[1]);
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });
 
    </script>
    <style type="text/css">
        
    </style>
   
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin: 0 auto; width: 800px;">
        <table cellpadding="2" cellspacing="1" border="0" class="tab">
            <tr>
                <td style="text-align: right;">
                    所学专业:
                </td>
                <td>
                    <asp:TextBox ID="txtMajor" class="text" runat="server" Width="250px"></asp:TextBox><span
                        style="color: Red;">&nbsp;&nbsp;可通过拼音码进行查询：如【历史学，可输入lsx进行查询也可输入汉字】</span>
                </td>
            </tr>
        </table>
         <asp:HiddenField ID="hidMajorCode" runat="server" />
         <asp:HiddenField ID="hidMajorName" runat="server" />
    </div>
    </form>
</body>
</html>

这里使用隐藏控件是为了能够在后台获得用户选择的值，下面是一般处理程序中的代码！

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using Common;

using DBUtility;

namespace Web.service

{

    /// <summary>

    /// GetJsonData 的摘要说明

    /// </summary>

    public class GetJsonData : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string input = context.Request["searchDbInforItem"];

            input = input.ToLower();

            string sql = @"SELECT  * FROM dbo.V_xk where spell like '%" + input + "%' or xk_name like '%" + input + "%' or xk_code like '%" + input + "%'";

            DataTable dt = SqlHelper.Query(sql).Tables[0];

            string data =  JsonHelper.ToJson(dt);

            context.Response.Write(data);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能的更多相关文章

  1. jquery ui dialog去除第一个文本框焦点问题

    最近做项目时,使用了jqueryUI dialog功能,当打开弹出框时,如果弹出框内容里面存在input,那么弹出框会自动获得第一个文本框焦点. 有时候,弹出框会有日期控件,一般日期控件采用focus ...

  2. 基于JQuery实现的文本框自动填充功能

    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...

  3. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  4. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  5. 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

    微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...

  6. jQuery—— jQuery get方法+一般处理程序处理文本框内容

    网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...

  7. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  8. JQuery UI之Autocomplete(4)多值输入、远程缓存与组合框

    1.多值输入 首先加入相关的css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel="style ...

  9. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

随机推荐

  1. 什么是CTS、CLS和CLR

    CTS.CLS和CLR是.NET框架的基本概念,但往往成为程序员们忽视的部分.清楚理解三者的概念,有助于.NET程序员编写高效安全的.NET程序. 所涉及到的知识点 •   .NET的基本概念 •   ...

  2. 注意:只有xcode5.1创建的项目会自动适配iphone6，iphone6p

    注意:只有xcode5.1创建的项目会自动适配iphone6,iphone6p

  3. Java环境的配置

    JAVA环境: 1.打开我的电脑--属性--高级--环境变量 2.将相应的JDK环境下载到本机,将路径保存到无中文路径中,并将路径复制下来. 3.在环境变量--系统变量,中新建 变量名:JAVA_HO ...

  4. codinglife主题小修改和有意思的博客挂件

    这个主题很漂亮,不过为了迎合自己的喜好ヽ(•̀ω•́ )ゝ,修改了字号.阴影之类的小细节.同时下面还有我博客里面的两个有意思的小挂件,请向右边看(๑و•̀ω•́)و 1.主题修改:复制下面的css代码 ...

  5. R包——jiebaR分词器

    关于R的分词器jiebaR 关于R的分词器jiebaR "结巴"中文分词的R语言版本,支持最大概率法(Maximum Probability),隐式马尔科夫模型(Hidden Ma ...

  6. mongodb数据库调试问题：‘db object already connecting, open cannot be called multiple times’

    在微博小系统的调试过程中: (1)登入登出可以正常显示,就是在注册的时候网络连接突然停止,但是用户名和密码已经存入数据库中,报错为:undefined is not a function 错误主要指向 ...

  7. discuz门户文章页面模板修改

    修改内容:view.htm 1.文章标题,模板代码 <h1 class="ph">$article[title] <!--{if $article['status ...

  8. nginx 编译参数

    jrhnpt01:/root# nginx -V nginx version: nginx/1.7.7 built by gcc 4.4.7 20120313 (Red Hat 4.4.7-4) (G ...

  9. HDU 5755 Gambler Bo（高斯消元）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5755 [题目大意] 一个n*m由0,1,2组成的矩阵,每次操作可以选取一个方格,使得它加上2之后对 ...

  10. oracle db_unnqiue_name db_name sid_name instance_name service_name