基于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自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
js实现本地时间同步功能
Aug 26 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
js页面加载后执行的几种方式小结
Jan 30 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&amp;mysql(一)
2006/10/09 PHP
转换中文日期的PHP程序
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
js模拟hashtable的简单实例
2014/03/06 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
使用python模拟高斯分布例子
2019/12/09 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
党的群众路线个人对照检查材料
2014/09/23 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
关于安全的广播稿
2014/10/23 职场文书
2015年公务员工作总结
2015/04/24 职场文书