基于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 操作select下拉列表框的一点小经验
Mar 20 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
JS前端轻量fabric.js系列物体基类
Aug 05 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
第十五节--Zend引擎的发展
2006/11/16 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
彻底理解Python中的yield关键字
2019/04/01 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python高级特性简介
2020/08/13 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
自考生自我评价分享
2014/01/18 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
司机岗位职责说明书
2014/07/29 职场文书
悬空寺导游词
2015/02/05 职场文书
地震慰问信
2015/02/14 职场文书