Example of jquery plug-in autocomplete usage, jqueryautocomplete

Example of jquery plug-in autocomplete usage, jqueryautocomplete

This example describes how to use the jquery plug-in autocomplete. We will share this with you for your reference. The details are as follows:

(1) Introduce js and styles

<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 front-end 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", // request background path {parse: function (jsonData) {var parsed = []; for (var I = 0; I <jsonData. length; I ++) {parsed [parsed. length ++] = {data: jsonData [I], value: jsonData [I]. catalogName, result: jso NData [I]. catalogName}; // convert the format of the json returned in the background} return parsed;}, formatItem: function (row, I, max) {var item = "<table id = 'Auto" + I + "'class = 'A' style = 'width: 100%; '> <tr> <td align = 'left'> in <font color = 'red'> "+ row. catalogName + "</font> search by Category </td> <td align = 'right' style = 'color: green; '> about" + row. catalogCount + "result </td> </tr> </table>"; return item; // format of autocomplete prompt }}). result (function (even, item) {var catalogName = it Em. catalogName; window. open ("productList/fuzzySearch/" + catalogName + "/" + kw + ". html? Page = 1 "," _ blank "); // events when you click the mouse}); </script>

(3) return the background json with 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;}