jQuery UI AutoComplete 自动完成使用小记


Posted in Javascript onAugust 21, 2010

页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="web_Test" %> 
<!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 type="text/css" rel="stylesheet" /> 
<link href="../css/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<!-- 解决下拉列表框被遮盖 jquery.bgiframe --> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.bgiframe-2.1.1.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.core.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.widget.js"></script> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.mouse.js"></script> 
<!-- jquery.ui.autocomplete --> 
<script type="text/javascript" language="javascript" src="../js/jQui/jquery.ui.autocomplete.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
$("#txtTest").autocomplete({ 
minLength:1, 
source: function(request, response) { 
$.ajax({ 
url: "../ajax/GetAllWords.ashx", 
dataType: "json", 
data: request, 
success: function( data ) { 
response( data ); 
} 
}); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="txtTest" type="text" /> 
</div> 
</form> 
</body> 
</html>

后台:
<%@ WebHandler Language="C#" Class="GetAllWords" %> 
using System; 
using System.Web; 
public class GetAllWords : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
if (context.Request.QueryString["term"] != null && context.Request.QueryString["term"] != "") 
{ 
context.Response.Clear(); 
context.Response.Charset = "utf-8"; 
context.Response.Buffer = true; 
context.Response.ContentEncoding = System.Text.Encoding.UTF8; 
context.Response.ContentType = "text/plain"; 
context.Response.Write(GetLikeUserName(context.Request.QueryString["term"])); 
context.Response.Flush(); 
context.Response.Close(); 
context.Response.End(); 
} 
} 
/// <summary> 
/// 拼接json 
/// </summary> 
/// <param name="key">关键词</param> 
/// <returns></returns> 
private String GetLikeUserName(string key) 
{ 
jhg.BLL.web_wordManager wordManager = new jhg.BLL.web_wordManager(); 
//搜索,返回10个关键词 
string[] listWord = wordManager.GetSearchWord(key, 10); 
System.Text.StringBuilder sbstr = new System.Text.StringBuilder("["); 
int ct = listWord.Length; 
for (int i = 0; i < ct; i++) 
{ 
sbstr.Append("\"" + listWord[i] + "\""); 
if (i == ct - 1) 
sbstr.Append("]"); 
else 
sbstr.Append(","); 
} 
return sbstr.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

注:
文件:jquery.ui.autocomplete.css
.ui-autocomplete { position: absolute; cursor: default; }
去掉: position: absolute;
效果图:
jQuery UI AutoComplete 自动完成使用小记
Javascript 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 #Javascript
jquery png 透明解决方案(推荐)
Aug 21 #Javascript
基于jquery的模态div层弹出效果
Aug 21 #Javascript
ExtJs 表单提交登陆实现代码
Aug 19 #Javascript
ExtJs中简单的登录界面制作方法
Aug 19 #Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 #Javascript
JS面向对象编程之对象使用分析
Aug 19 #Javascript
You might like
php array的学习笔记
2012/05/10 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
destoon二次开发入门示例
2014/06/20 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
js自定义事件代码说明
2011/01/31 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
应届生财务管理求职信
2013/11/06 职场文书
借款协议书范本
2014/04/22 职场文书
妈妈活动方案
2014/08/15 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Python 线程池模块之多线程操作代码
2021/05/20 Python
nginx+lua单机上万并发的实现
2021/05/31 Servers