基于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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
js中replace的用法总结
Dec 27 Javascript
angularJS 中input示例分享
Feb 09 Javascript
初识Node.js
Mar 20 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
JS随机数产生代码分享
Feb 24 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JS实现动态星空背景效果
Nov 01 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python版DDOS攻击脚本
2019/06/12 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
绩效专员岗位职责
2013/12/02 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
文明市民先进事迹
2014/05/15 职场文书
网络舆情信息简报
2015/07/21 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript