基于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上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 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获取网络上文件
2006/10/09 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php中执行系统命令的方法
2015/03/21 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
js选择器全面解析
2016/06/27 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
Python文件的读写和异常代码示例
2017/10/31 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Django框架模板用法入门教程
2019/11/04 Python
python类中super() 的使用解析
2019/12/19 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python: glob匹配文件的操作
2020/12/11 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
七夕情人节促销方案
2014/06/07 职场文书
拆迁委托协议书
2014/09/15 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书