jquery plug in autocomplete usage example

  • 2021-07-01 06:32:45
  • OfStack

This article illustrates the use of jquery plug-in autocomplete. Share it for your reference, as follows:

(1) Introducing js and Styles

<script type="text/JavaScript" src="../js/jQuery-1.8.0.js"
<script type="text/javascript" src="../js/jquery.autocomplete.js"
<link href="css/jquery.autocomplete.css" rel="Stylesheet">

(2) Foreground of autocomplete js

<script type="text/javascript">
$(document).ready(function() {
var kw ="";
$("#kw").blur(function (){
kw = $("#kw").val();
// Background path of request 
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
// Returned in the background json Perform format conversion 
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 in classification </td><td align='right' style='color:green;'> About "
+ row.catalogCount
+ " Results </td></tr></table>";
return item;
//autocomplete Format when prompted 
var catalogName=item.catalogName;
// Events when mouse clicks 

(3) Background json is returned with springmvc

@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;

For more readers interested in jQuery related content, please check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.

Related articles: