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的一种模块模式
Mar 22 Javascript
JS 继承实例分析
Nov 04 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
基于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中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
yii添删改查实例
2015/11/16 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JavaScript的Cookies
2008/01/16 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python单元测试unittest实例详解
2015/05/11 Python
python实现BackPropagation算法
2017/12/14 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Javascript如何发送一个Ajax请求
2015/01/26 面试题
测绘工程本科生求职信
2013/10/10 职场文书
党员个人思想汇报
2013/12/28 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
初三学习决心书
2014/03/11 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
英语专业求职信
2014/07/08 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
小学运动会开幕词
2016/03/04 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server