基于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 刷新全集常用代码
Nov 22 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue实现数字滚动效果
Jun 29 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
基于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
php编写的一个E-mail验证类
2015/03/25 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
信访工作者先进事迹
2014/01/17 职场文书
中专自我鉴定
2014/02/05 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
会员活动策划方案
2014/08/19 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2014年采购工作总结
2014/11/20 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
先进基层党组织材料
2014/12/25 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS