基于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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 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
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python collections模块的使用
2020/10/16 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
iostream与iostream.h的区别
2015/01/16 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
迟到检讨书300字
2014/02/14 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
工作保证书
2015/01/17 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript