基于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 bind事件使用详解
May 05 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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后门URL的防范
2013/11/12 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python爬虫之百度API调用方法
2017/06/11 Python
Python线性回归实战分析
2018/02/01 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android