Very useful JQuery auto-completion plug-in bigautocomplete, jquery auto-completion plug-in

Very useful JQuery auto-completion plug-in bigautocomplete, jquery auto-completion plug-in

The auto-completion plug-in has some limited functions and is not supported by foreigners. Today, I found that bigautocomplete is made by a Chinese people. It's not bad.

Official Website: http://code.google.com/p/jquery-bigui/downloads/list

Download from here (transcoded as a UTF-8) If you don't want to flip the wall: http://download.csdn.net/detail/clementad/8917219

Procedure:

1. Put two js and css files in the project:

2. Reference on the project page:

<script src="./resources/bigui/jquery.bigautocomplete.js" charset="UTF-8" type="text/javascript"></script><link rel="stylesheet" href="./resources/bigui/jquery.bigautocomplete.css" type="text/css" />

3. Define text input used for search. The id is tcSearch:

<Tr> <th> Use Case search </th> <td> <input type = "text" id = "tcSearch" size = "80"/> <input type = "button "value =" clear "onClick =" $ ('# tcsearch '). val ('');"> </td> </tr>

4. Define the array object to be searched (each object in the array contains the title attribute, and the control searches for the content in the title ):

Var testCases = [{title: "0.1 use Map to receive Form Data or Query String submitted by the front end", url: "/mapParameter/map", requestBody: "authCode = 123456 & accountName = 15888888888 & password = 888962 & password = 666566"}, {title: "0.2 use MultiValueMap to receive Form Data or Query String submitted by the front end", url: "/mapParameter/multiValueMap", requestBody: "authCode = 123456 & phone = 15888888888 & verifyType = 0 & verifyType = 1"}, {title: "0.3 use Map to receive Request Payload in json format submitted by the front end", url: "/mapParameter/jsonParams", requestBody: '{"authCode": "123456", "phone ": "15888888888", "code": 0, "code": 1} ', contentType: "application/json; charset = UTF-8"}, {title: "1.1 test Guava cache AreaIdToArea", url: "/cache/test/getArea", requestBody: "areaId = 4401"}];

5. Call the bigAutocomplete function in the initialization function to register the searched content and callback function:

// System initialization: $ (function () {rootPath = getRootPath (); $ ("# tcSearch "). bigAutocomplete ({data: testCases, callback: function (data) {$ ("# url "). val (rootPath + data. url); $ ("# params "). val (JSON. stringify (JSON. parse (decodeURI (data. requestBody), null, "\ t"); $ ("# tcTitle "). val (data. title );}});});

Note: bigAutocomplete parameter description:

$ ("Xxxxx"). bigAutocomplete ({data: [...], url: "", width: 0, callback :{}})

Parameters	Description
Data (optional ):	Data: the format of {data: [{title: null, result :{}}, {title: null, result :{}}]} must have one url and one data parameter, only one entry takes effect. data takes priority.
Url (optional ):	The url is a string used to obtain data in the ajax background. The returned data format is the same as the data parameter.
Width (optional ):	The width of the drop-down box. By default, the width of the input box is used.
Callback (optional ):	The callback function after the selected row is press ENTER or click to return other data of the selected row and perform some operations.

6. Test results ):

(For Original Articles, please note