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 相关文章推荐
JSON.stringify 语法实例讲解
Mar 14 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue实现文件上传功能
Aug 13 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jQuery实现导航回弹效果
2017/02/27 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
如何通过JS实现转码与解码
2020/02/21 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python装饰器实例大详解
2017/10/25 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python是怎样处理json模块的
2020/07/16 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
英国儿童图书网站:Scholastic
2017/03/26 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
投标单位介绍信
2014/01/09 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
2015年元旦活动总结
2014/05/09 职场文书
2014年材料员工作总结
2014/11/19 职场文书
安全检查汇报材料
2014/12/26 职场文书
话题作文之呼唤
2019/12/18 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL