基于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 Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
详解js中的原型,原型对象,原型链
Jul 16 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 strtr() 函数使用说明
2008/11/21 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Python实现简单多线程任务队列
2016/02/27 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python OS模块实例详解
2019/04/15 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
火锅店创业计划书范文
2014/02/02 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
教师年度考核评语
2014/04/28 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Python利用capstone实现反汇编
2022/04/06 Python