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的with语句使用方法
Sep 21 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Javascript 解疑
2009/11/11 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
javascript每日必学之继承
2016/02/23 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python语言描述连续子数组的最大和
2018/01/04 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Django 路由控制的实现
2019/07/17 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python tkinter实现连连看游戏
2020/11/16 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
金士达面试非笔试
2012/03/14 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
保送生自荐信范文
2013/10/06 职场文书
三八活动策划方案
2014/08/17 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
5个实用的JavaScript新特性
2022/06/16 Javascript