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 ...
随机推荐
- AngularJs（一） MVC 模式的应用
Model的应用 MVC的模式大家都是十分熟悉了,那么Angular是怎么规划的呢.数据被放在json文件中,通过Ajax获取数据. [{ "action": "Buy ...
- 性能优化工具---sar
简介: System Activity Reporter系统活动情况报告 下载地址: http://pagesperso-orange.fr/sebastien.godard/download.htm ...
- English - 英语学习小笔记
1.It is...to do sth:做某事是.... 解析:It 是形式主语,后面一半接形容词做表语,to do sth是不定式短语作真正主语. 2.make do和make doing是两种表达 ...
- 大写String和小写string的区别
1.string是c#中的类,String是.net Framework的类(在c# IDE中不会显示蓝色) ; 2.c# string映射为.net Framework的String ; 3.如果用 ...
- apache+mysql+php环境的手动搭建
一.搭建Apache Http Server 官方下载地址:http://www.apachehaus.com/cgi-bin/download.plx 搭建环境:win10 64位 WIN10 64 ...
- istringstream和ostringstream的使用方法
写程序用到istringstream和ostringstream,看了别人的博文,借鉴~~~~~~. iostream 标准库支持内存中的输入/输出,只要将流与存储在程序内存中的 string 对象捆 ...
- BZOJ 2819: Nim( nim + DFS序 + 树状数组 + LCA )
虽然vfleaking好像想卡DFS...但我还是用DFS过了... 路径上的石堆异或和=0就是必败, 否则就是必胜(nim游戏). 这样就变成一个经典问题了, 用DFS序+BIT+LCA就可以在O( ...
- Nginx +iis反向代理
一:简介 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所 ...
- 6)图[2]Prim算法[最小生成树]
Prim 算法 求解方法: 首先将所指定的起点作为已选顶点,然后反复在满足如下条件下的边中选择一条最小边,直到 所有顶点已成为已选顶点为止(选择n-1条边). #include "iostr ...
- Windows 键盘快捷键
Windows 键盘快捷键 标签页和窗口快捷键 Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+Shift+N 在隐身模式下打开新窗口. 按 Ctrl+O,然后选择文件. 通过 G ...