jquery Plug-in AutoComplete usage example _jquery

This example describes the jquery plug-in AutoComplete usage. Share to everyone for your reference, specific as follows:

(1) Introduction of JS and style

<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 of the front desk 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",//requested 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:jsondata[i].catalogname}
;
Format conversion of 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 ' > search for </td> in <font color= ' red ' > ' + row.catalogname + ' </font> category &LT;TD align= ' right ' style= ' color:green; '
> About "+ row.catalogcount +" results </td></tr></table>;
return item; Format at prompt autocomplete}). Result (function (Even,item) {var catalogname=item.catalogname; window.open ("productlist/ fuzzysearch/"+catalogname+"/"+kw+". Html?page=1 "," _blanK ");
When the mouse clicks the event});
});

 </script>

(3) Background JSON returns 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;
}

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.