jquery插件autocomplete用法示例


Posted in Javascript onJuly 01, 2016

本文实例讲述了jquery插件autocomplete用法。分享给大家供大家参考,具体如下:

(1)引入js和样式

<script type="text/JavaScript" src="../js/jQuery-1.8.0.js"
charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery.autocomplete.js"
charset="utf-8"></script>
<link href="css/jquery.autocomplete.css" rel="Stylesheet">

(2)autocomplete的前台js

<script type="text/javascript">
//alert("test");../search/fuzzy/pkword.html
$(document).ready(function() {
var kw ="";
$("#kw").blur(function (){
kw = $("#kw").val();
});
$("#kw").autocomplete("search/fuzzy/pkword.html",
//请求的后台路径
{
parse : function(jsonData) {
var parsed = [];
for ( var i = 0; i < jsonData.length; i++) {
parsed[parsed.length++] = {
data : jsonData[i],
value : jsonData[i].catalogName,
result : jsonData[i].catalogName
};
//对后台返回的json进行格式转换
}
return parsed;
},
formatItem : function(row,i,max) {
var item = "<table id='auto"
+ i
+ "'class='a' style='width:100%;'> <tr><td align='left'>在<font color='red'>"
+ row.catalogName
+ "</font>分类中搜索</td><td align='right' style='color:green;'>约"
+ row.catalogCount
+ "结果</td></tr></table>";
return item;
//autocomplete提示时的格式
}
}).result(function(even,item){
var catalogName=item.catalogName;
window.open("productList/fuzzySearch/"+catalogName+"/"+kw+".html?page=1","_blank");
//鼠标点击时的事件
});
});
</script>

(3)后台json用springmvc返回

@ResponseBody
@RequestMapping(value = "/search/fuzzy/pkword.html", method = RequestMethod.GET)
public List<CatalogCountBean> fuzzySearch(@RequestParam String q) {
List<CatalogCountBean> list = null;
System.out.println("q:" + q);
list = (List<CatalogCountBean>) productListService.fuzzySearch(
productListNamespace, q);
return list;
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
学习Angularjs分页指令
Jul 01 #Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
You might like
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP扩展开发入门教程
2015/02/26 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
javascript正则表达式总结
2016/02/29 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python数学形态学实例分析
2019/09/06 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
团组织关系介绍信
2014/01/12 职场文书
书香校园活动方案
2014/02/28 职场文书
英语求职信范文
2014/05/23 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
法制主题班会教案
2015/08/13 职场文书