JQuery plug-in autoComplete Usage Details, jqueryautocomplete

JQuery plug-in autoComplete Usage Details, jqueryautocomplete

Installation/file to be introduced

<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. You can use the correct path as needed.

 

<Input type = "text" id = "autocomplete" class = "dataInput" value = "all"/>

// Use the plug-in element

 

Well, the following describes how to use the plug-in: local data, ajax Dynamic Data Acquisition

Local Data

Var countries = [
{Value: 'American ', data: 'us '},
{Value: 'China', data: 'zh-cn '},
//...
{Value: 'English ', data: 'en '}
];

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

// So easy!

 

Dynamically filter server data using ajax

$ ('# Autocomplete'). autocomplete ({
// Obtain the Server Data url
ServiceUrl: 'http: // www.baidu.com/api ',
// The parameter name passed to the server keyword, similar to the filter in the $. post (url, {'filter': keywords}, function () {}) of the ajax request
ParamName: 'filter ',
TransformResult: function (response ){
// Parse the json string passed by the server
Var obj = $. parseJSON (response );
Return {
Suggestions: $. map (obj. list, function (dataItem ){
Return {value: dataItem. right, data: dataItem. left };
})
};
},
// Process data after selected values
OnSelect: function (suggestion ){
BeneficiaryCode = suggestion. data;
Beneficiary = suggestion. value;
}
});

Effect:

 

 

More detailed usage:

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

 

How does Jquery AutoComplete plug-in work?

... Use cookies!
Generally, AutoComplete is used to input notifications.
!!!

Jquery autocomplete usage

Jquery also has auto-completion controls. The return value is of the json type. You can also write it by yourself and use $. post () to define the type to be returned.