这篇文章主要介绍了 jquery 插件 autocomplete 用法, 结合实例形式分析了 jQuery 插件 autocomplete 与后台交互实现搜索的自动完成功能实现技巧, 需要的朋友可以参考下
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0306/264484.html