jquery plug-in autocomplete use detailed

Files installed/required for introduction

<script type= "Text/javascript" src= ". /js/jquery-1.8.3.min.js.js "></script>

<link href= ". /plug/autocomplete/styles.css "type=" Text/css "rel=" stylesheet "/>
<script type= "Text/javascript" src= ". /plug/autocomplete/jquery.autocomplete.js "></script>

Here is my relative path, the reader to use their own corresponding correct path

<input type= "text" id= "AutoComplete" class= "Datainput" value= "All"/>

elements that use plug-ins

OK, the following mainly from two aspects of the change plugin use: Local data, Ajax dynamic access to data

Local data

var countries = [
{value: ' American ', data: ' Us '},
{value: ' Chinese ', Data: ' ZH-CN '},
// ...
{value: ' 中文版 ', data: ' En '}
];

$ (' #autocomplete '). AutoComplete ({
Lookup:countries,
Onselect:function (suggestion) {
Alert (' You selected: ' + Suggestion.value + ', ' + suggestion.data);
}
});

So easy!

Ajax dynamically filters Server data

$ (' #autocomplete '). AutoComplete ({
Gets the URL of the server data
Serviceurl: ' Http://www.baidu.com/api ',
The parameter name passed to the server keyword, similar to the filter in the AJAX request $.post (URL, {' Filter ': keywords}, function () {})
ParamName: ' Filter ',
Transformresult:function (response) {
Parse the JSON string that the server passed over
var obj = $.parsejson (response);
return {
Suggestions: $.map (obj.list, function (DataItem) {
return {value:dataItem.right, data:dataItem.left};
})
};
},
Data processing after checking values
Onselect:function (suggestion) {
Beneficiarycode=suggestion.data;
Beneficiary=suggestion.value;
}
});

Effect:

More detailed usage:

Https://github.com/devbridge/jQuery-Autocomplete

jquery plug-in autocomplete use detailed