(1)引入js和样式
<script type="text/JavaScript" src="https://www.jb51.net/js/jQuery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.autocomplete.js" charset="utf-8"></script> <link href="https://www.jb51.net/css/jquery.autocomplete.css">
(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 = "<tableclass='a'> <tr><td>在<font color='red'>" + row.catalogName + "</font>分类中搜索</td><td>约" + row.catalogCount + "结果</td></tr></table>"; return item; //autocomplete提示时的格式 } }).result(function(even,item){ var catalogName=item.catalogName; window.open("productList/fuzzySearch/"+catalogName+"https://www.jb51.net/"+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相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》