ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
首先当然是去下载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;"> 可通过拼音码进行查询：如【历史学，可输入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方法实现文本框的自动搜索填充功能的更多相关文章
- jquery ui dialog去除第一个文本框焦点问题
最近做项目时,使用了jqueryUI dialog功能,当打开弹出框时,如果弹出框内容里面存在input,那么弹出框会自动获得第一个文本框焦点. 有时候,弹出框会有日期控件,一般日期控件采用focus ...
- 基于JQuery实现的文本框自动填充功能
1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面測试,都没有问题.非常高兴,交付后端使用.然而发如今微信自带浏览器里面,却是出现 ...
- jQuery—— jQuery get方法+一般处理程序处理文本框内容
网上常常看到这种交互方式,当去一个站点注冊username的时候,假设文本框内没有输入数据,或者数据输入的内容格式不正确.就会将文本框变成红色来提示你输入的内容有误. 自己将这个文本框验证的方式改变了 ...
- ASP.NET JQuery 随笔-搜索框默认提示
一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...
- JQuery UI之Autocomplete(4)多值输入、远程缓存与组合框
1.多值输入 首先加入相关的css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel="style ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
随机推荐
- SICP 习题 （1.10）解题总结
SICP 习题 1.10 讲的是一个叫“Akermann函数”的东西,去百度查可以查到对应的中文翻译,叫“阿克曼函数”. 就像前面的解题总结中提到的,我是一个数学恐惧者,看着稍微复杂一点的什么函数我就 ...
- 如何查看npm配置？
npm config list //查看基本配置 npm config list -l //查看所有配置 npm本地安装与全局安装有什么区别? npm install grunt // 本地安装,则是 ...
- Asp.net的对Excel文档的导入导出操作
刚刚初入职场,在休闲的时间写下了项目中用到的对Excel文档操作的方法以及总结,多的不说,直接上代码 public static void CreateExcel(DataSet ds, string ...
- iOS App集成Apple Pay教程（附示例代码）
苹果在本周一发布了iOS 8.1版本,并正式开放了Apple Pay支付系统.Apple Pay是一个基于NFC的支付系统,不久将被数以万计的线下零售商店予以支持.即便这项科技并不是彻底的突破性进展, ...
- 07-2. A+B和C (15)
给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B ...
- IIS7内建账号，应用程序池
在IIS7以前的IIS版本中有一个本地帐号,是在安装时创建的,叫做 IUSR_MachineName.一旦启用匿名身份认证,这个IUSR_MachineName帐号就是IIS默认使用的身份(ident ...
- HDU 5054 Alice and Bob
#include <cstdio> int main(){ int n,m,x,y; while(~scanf("%d%d%d%d",&n,&m,&am ...
- 【转】《分享一下我研究SQLSERVER以来收集的笔记》未整理
分享一下我研究SQLSERVER以来收集的笔记 http://www.cnblogs.com/lyhabc/archive/2013/07/27/3219117.html
- php操作xml详解
XML是一种流行的半结构化文件格式,以一种类似数据库的格式存储数据.在实际应用中,一些简单的.安全性较低的数据往往使用 XML文件的格式进行存储.这样做的好处一方面可以通过减少与数据库的交互性操作提高 ...
- Java内存模型-jsr133规范介绍
原文地址:http://www.cnblogs.com/aigongsi/archive/2012/04/26/2470296.html; 近期在看<深入理解Java虚拟机:JVM高级特性与最佳 ...