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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
javascript 函数速查表
Feb 07 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
javascript实现移动端轮播图
Dec 09 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读取目录所有文件信息dir示例
2014/03/18 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP实现的日历功能示例
2018/09/01 PHP
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python实现识别相似图片小结
2016/02/22 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python中强大的format函数实例详解
2018/12/05 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python内置函数property()如何使用
2020/09/01 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
自我评价200字分享
2013/12/17 职场文书
入党转预备思想汇报
2014/01/07 职场文书
数学系个人求职信范文
2014/01/30 职场文书
《草原》教学反思
2014/02/15 职场文书
广告创意求职信
2014/03/17 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
工作简报怎么写
2015/07/21 职场文书
美元符号 $
2022/02/17 杂记
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers