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 ...
随机推荐
- 【iOS】Plist-XML-JSON数据解析
网络上数据传输通用的有XML.JSON等,iOS中也能够用Plist. 要进行传输数据.就要首先进行序列化: 1.序列化. 对象转换成二进制流.(这个一句话即可) .反序列化. 二进制流转换为对象等 ...
- [置顶] PHP如何扩展和如何在linux底层对php扩展?
虽然大部分php工程师都不需要知道php的C代码核心是如何运作的,有些人可能知道有个dl()函数.或者使用过一些第三方的类库,这些正是本文的重点之一. 希望对那些想把php带向更 ...
- 关于Lambda表达式访问外部变量
在<C#高级编程>一书中提到通过Lambda表达式可以访问Lambda表达式块外部的变量 ,这是一个很好的功能(类似Js中的 闭包).但是如果没有正确的使用,会非常危险. 比如下面的事例中 ...
- HTML之学习笔记（六）添加链接
html添加链接所用的标签为<a>标签 语法: 定义:从当前页面,跳转到指定页面或文件的一个标签 <a href="URL">热点文字 ...
- Win8.1重装win7或win10中途无法安装
一.有的是usb识别不了,因为新的机器可能都是USB3.0的,安装盘是Usb2.0的. F12更改系统BIOS设置,我改了三个地方: 1.设置启动顺序为U盘启动 2.关闭了USB3.0 control ...
- python打包成exe
目前有三种方法可以实现python打包成exe,分别为 py2exe Pyinstaller cx_Freeze 其中没有一个是完美的 1.py2exe的话不支持egg类型的python库 2.Pyi ...
- I - Doing Homework again
I - Doing Homework again Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & ...
- nginx install lua module
#install luajit #http://luajit.org/download.html .tar.gz cd LuaJIT- make install PREFIX=/home/allen. ...
- Hadoop基础概念介绍
基于YARN的配置信息, 参见: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ hadoop入门 - 基础概念 ...
- Aliyun EMR 集群重启
1.如果Core节点有Down掉,ActiveNodes少于Core节点数. 处理: a.登陆到Master节点,到目录 /opt/apps/hadoop-2.7.2/sbin b.执行 ./stop ...