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 ...
随机推荐
- Android Json生成及解析实例
JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...
- JS学习笔记（二）运算符和流程控制语句
js中的运算符和流程控制,循环,判断语句都和C#基本一致,但又有其独特的运算符. typeof运算符 获得数据的数据类型,如number,string等.语法: string typeof(变量); ...
- 53个Oracle语句优化规则详解(转）
Oracle sql 性能优化调整 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种:a. RULE (基于规则) b. COST (基于成本) c. CHOOSE ...
- Asp.Net MVC 控制器
原文链接:http://www.asp.net/learn/mvc/ 这篇教程探索了ASP.NET MVC控制器(controller).控制器动作(controller action)和动作结果(a ...
- JSP标签库
step1: 定义一个标签处理类:改类必须实现SimpleTag接口,在实际中是拓展它的子类SimpleTagSupport.复写doTag方法 public class MyTag extends ...
- System.Web.HttpException: 无法向会话状态服务器发出会话状态请求
System.Web.HttpException: 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器 ...
- DLL注入_拦截技术之Hook方式
后卫大师教你进程注入 首先提一下,由于文章完全是我手写,所以打不了太多,请包含,由于我已经提供了源代码,所以我在这里详细讲一下理论,至于想看代码的下载代码就可以了.代码中关于注入的部分做了详细的注释. ...
- 从零开始PHP学习 - 第三天
写这个系列文章主要是为了督促自己 每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...
- [LeetCode]题解（python）：144-Binary Tree Preorder Traversal
题目来源: https://leetcode.com/problems/binary-tree-preorder-traversal/ 题意分析: 前序遍历一棵树,递归的方法很简单.那么非递归的方法呢 ...
- less做个径向菜单
在慕课网发现了一个有意思的课程,叫 数学知识在CSS动画中的应用 .用到的数学知识是如何计算圆上每个点的坐标.统一名称,中间的菜单叫触发菜单,四周发散的菜单叫子菜单, 效果预览 慕课网通过jquery ...