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 相关文章推荐
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
一个实用的php验证码类
2017/07/06 PHP
php生成微信红包数组的方法
2019/09/05 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
python二维列表一维列表的互相转换实例
2018/07/02 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
幼儿园小班家长寄语
2014/04/02 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
美术社团活动总结
2014/06/27 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
工作失职自我检讨书
2015/05/05 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫