This is yet another jquery autocomplete plugin with a couple of specific functions.
Some of them:
- The button to show all results and related callback;
- Translitiration for cyrillyc input;
- Configurable css-classes;
Usage is quite simple. You just have to set up lookup data and some options (if you need it).
For example:
var lookupDataArray = [
{"data": "<url of current item>", "value": "<text value, to recognize current search item>"},
...
{"data": "<url of current item>", "value": "<text value, to recognize current search item>"}
];
$("<search field selector>").autocomplete({
"lookup": lookupDataArray,
"autoSelectFirst": true,
"showAll": function (suggestions) {
// do something
}
});
Parameter |
lookup |
Type |
Array |
Default |
[] (empty array) |
Required |
Yes |
Description |
Data for autocomplete |
Parameter |
transliteration |
Type |
Boolean |
Default |
true |
Required |
No |
Description |
It defines if we need to transliterate cyrilic symbols (e.g. "лента"-> "lenta", "триггер"->"trigger") |
Parameter |
autoSelectFirst |
Type |
Boolean |
Default |
true |
Required |
No |
Description |
If defined as 'true' first item in search result will be selected |
Parameter |
caseSensetive |
Type |
Boolean |
Default |
false |
Required |
No |
Description |
If defined as 'false' search will ignore upper case symbols |
Parameter |
classes |
Type |
Object |
Required |
No |
Description |
Set of css classes to customize output view. |
Default classes:
"classes": {
"container": "autocomplete-suggestions",
"selected": "autocomplete-selected",
"suggestion": "autocomplete-suggestion",
"wrapper": "autocomplete-wrapper",
"showAll": "autocomplete-show-all"
}
Parameter |
containerParent |
Type |
String |
Default |
"body" |
Required |
No |
Description |
It defines element to append suggestions container. |
Parameter |
showAll |
Type |
function |
Default |
undefined |
Required |
No |
Description |
If defined, there is an ability to use "Show all" button to get all search results. |
Usage example:
"showAll": function (suggestions) {
console.log(suggestions); // [{"data": "<url>", "value": "<text value>"}, ... {...}]
}
Parameter |
containerHeight |
Type |
Number |
Default |
500 |
Required |
No |
Description |
It defines suggestions container max-height in pixels. |
Parameter |
labels.showAllButtonText |
Type |
String |
Default |
"Show all" |
Required |
No |
Description |
It defines label for "show all" button. |
MIT