首先当然是去下载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. PostMessage和SendMessage的区别

    1, PostMessage只把消息放入队列,不管其他程序是否处理都返回,然后继续执行,这是个异步消息投放函数.而SendMessage必须等待其他程序处理消息完了之后才返回,继续执行,这是个同步消息 ...

  2. HTML系列（四）：编辑图像

    一.图像的基本概念 1.矢量图:文件占用空间小,放大后图像不会失真,和分辨率无关.适用于图形设计.文字设计.标志设计.版式设计等. 2.位图:由像素点组成,文件较大,放大和缩小图像会失真. 3.有损压 ...

  3. [编程题] 最大的LeftMax与rightMax之差绝对值

    [编程题] 最大的LeftMax与rightMax之差绝对值 给定一个长度为N的整型数组arr,可以划分成左右两个部分: 左部分arr[0..K],右部分arr[K+1..arr.length-1], ...

  4. Tip插件的使用

    Tip.js概述——美化弹窗插件 开源美化弹窗插件1.JavaScript原生代码2.美化网站用户界面 Tip.js插件的显示效果 Tip.js的使用方法 Tip({ str:'alert上需要弹出显 ...

  5. [转]spring 监听器　IntrospectorCleanupListener简介

    "在服务器运行过程中,Spring不停的运行的计划任务和OpenSessionInViewFilter,使得Tomcat反复加载对象而产生框架并用时可能产生的内存泄漏,则使用Introspe ...

  6. 如何在一个工作站里创建多个工程（同一个xcode下面创建多个工程）

    第一步,理解: 怎么会有一个xcode下面创建两个工程这一说呢,一个工程代表一个项目,意思就是有两个项目了.错.其实在一个窗口下面并不是两个工程,而是一个workspace 即一个工作站.在工作站里面 ...

  7. .NET软件开发与常用工具清单

    [工欲善其事,必先利其器]软件开发的第一步就是选择高效.智能的工具. 下面列出的工具软件能辅助提高工作效率.  开发类工具 微软.Net平台下的集成开发环境:Visual Studio. Visual ...

  8. 搭建Hadoop集群 (一)

    上面讲了如何搭建Hadoop的Standalone和Pseudo-Distributed Mode(搭建单节点Hadoop应用环境), 现在我们来搭建一个Fully-Distributed Mode的 ...

  9. （4）事件处理——（3）代码执行的顺序（Timing of code execution）

    In Chapter 1, Getting Started, we noted that $(document).ready()was jQuery's primary way to perform ...

  10. IOS 物理引擎

    来自IOS7 by tutorials   下面是个人的一点翻译总结 1,首先在初始化方法李画一个方块 UIView* square = [[UIView alloc] initWithFrame: ...