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 ...
随机推荐
- oracle传输表空间功能测试（含详细过程）
最近做数据迁移,之前有一篇迁移思路思考的文章,这里继续做具体的测试,主题问表空间传输. 一.源服务器上导出表空间 源服务器: 10.1.122.55 目标服务器:10.1.122.54 0.设置字 ...
- 整合Spring.net到asp.net网站开发中初探
整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说 Spring提供了一个轻量级的用于构建企业级 ...
- vs2012新建项目产生的问题
当用vs新建web项目时遇到
- 如何查詢 SQL Server 資料庫中欄位值為 NULL 的資料（转）
最近使用mssql的时候对于未null的字段查询不到 http://blogs.msdn.com/b/jchiou/archive/2008/05/01/sql-server-null.aspx 先建 ...
- Apache 编译扩展的方法
下载源码包 进入源码包的modules目录 选择你要编译的.c文件 eg: /home/work/local/apache/bin/apxs -c -i -a mod_proxy_http.c 选项说 ...
- R包——ggplot2（二）
关于ggplot包(二) 关于ggplot包(二) 标尺(Scale) 从前面可以看到,画图其实就是在做映射,不管是映射到不同的几何对象上,还是映射各种图形属性.在对图形属性进行映射之后,使用标尺可以 ...
- JS 操作日期
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- Use eplipse to develop Python project
Source: This is the example how to use eclipse and python. http://www.360doc.com/content/15/0206/10/ ...
- 使用VisualVM分析tomcat运行状况（1）
VisualVM是一款java程序性能分析与调优工具,而且还是jdk中自带的工具之一. tomcat也是一个java程序,自然也可以用它来进行监控.不过这里还是会有些问题,tomcat有两种常用的期待 ...
- 去掉android的屏幕上的title bar
在配置文件里修改 (关键代码:android:theme="@android:style/Theme.NoTitleBar.Fullscreen",如果想只是去除标题栏就后面不用加 ...