基于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 学习之二 属性(html()与html(val))
Nov 25 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
react合成事件与原生事件的相关理解
May 13 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
简单易用的计数器(数据库)
2006/10/09 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
javascript折半查找详解
2015/01/26 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
PyQt5实现登录页面
2020/05/30 Python
python FTP编程基础入门
2021/02/27 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
大宝sod蜜广告词
2014/03/21 职场文书
入职担保书怎么写
2014/05/12 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
邀请书模板
2015/02/02 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
听课评课活动心得体会
2016/01/15 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers