基于jquery的文本框与autocomplete结合使用(asp.net+json)


Posted in Javascript onMay 30, 2012

JS脚本引用

<script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script>

样式引用
<style type="text/css" media="all"> 
@import url("/scripts/Jquery.autocomplete/css/jquery.autocomplete.css"); 
</style>

JS代码
?$(document).ready(function () { 
$("#<%=_SearchKeyGame.ClientID %>").autocomplete("./AjaxHandle/AutoComplete.ashx?type=game", { 
minChars: 0, 
max: 9, 
width: 150, 
matchContains: true, 
autoFill: false, 
formatItem: function (row, i, max) { 
return row.name; 
}, 
formatMatch: function (row, i, max) { 
return row.name + " "; 
}, 
formatResult: function (row) { 
return row.name; 
} 
}); 
jQuery("#<%=_SearchKeyGame.ClientID %>").result(function (event, data, formatted) { 
if (data) { 
jQuery("#_SearchKeyGame").attr("value", data.name); 
} 
else { 
} 
}); 
$("#<%=_SearchKeyPlat.ClientID %>").autocomplete("./AjaxHandle/AutoComplete.ashx?type=plat", { 
minChars: 0, 
max: 9, 
width: 150, 
matchContains: true, 
autoFill: false, 
formatItem: function (row, i, max) { 
return row.name; 
}, 
formatMatch: function (row, i, max) { 
return row.name + " "; 
}, 
formatResult: function (row) { 
return row.name; 
} 
});

AutoComplete。ashx返回JOSON值
string queryStr = context.Request.QueryString["q"]; 
context.Response.ContentType = "text/plain"; 
context.Response.Cache.SetNoStore(); 
string jsponString = "["; 
string where = string.Format(" (select dbo.[f_GetPy](platname)) like '%{0}%' or platname like '%{0}%'", Common.Common.ToSql(queryStr)); 
DataTable dt = new Models.Plat().GetDataTable(where,10); 
if (dt.Rows.Count > 0) 
{ 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
jsponString += "{id:\"" + dt.Rows[i]["PlatID"].ToString() + "\",name:\"" + dt.Rows[i]["PlatName"].ToString() + "\"},"; 
} 
} 
jsponString = jsponString.Trim(new char[] { ',' }); 
jsponString += "]"; 
context.Response.Write(jsponString); 
context.Response.End();
Javascript 相关文章推荐
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
详解javascript事件冒泡
Jan 09 Javascript
js 求时间差的实现代码
Apr 26 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
基于jQuery的倒计时实现代码
May 30 #Javascript
基于jquery的放大镜效果
May 30 #Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 #Javascript
Javascript的常规数组和关联数组对比小结
May 24 #Javascript
基于mootools插件实现遮罩层新手引导
May 24 #Javascript
jQuery 拖动层(在可视区域范围内)
May 24 #Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
关于js datetime的那点事
2011/11/15 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
使用Python生成url短链接的方法
2015/05/04 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python监控文件或目录变化
2016/06/07 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python中map的基本用法示例
2018/09/10 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
总经理致辞
2015/07/29 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS