基于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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
机械制造专业毕业生求职信
2014/03/02 职场文书
机房搬迁方案
2014/05/01 职场文书
廉政教育的心得体会
2014/09/01 职场文书
导游词范文
2015/02/13 职场文书
新人入职感言
2015/07/31 职场文书
同学聚会祝酒词
2015/08/10 职场文书