Javascript:
var options = {
url: "resources/countries.json",
getValue: "name",
list: {
match: {
enabled: true
},
maxNumberOfElements: 8
},
theme: "square"
};
$("#square").easyAutocomplete(options);
HTML:
<input id="square"/>
[
{"name": "Afghanistan", "code": "AF"},
{"name": "Aland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"},
...
]
CSS:
.eac-square input {
background-image: url("images/icon_search.png");
background-repeat: no-repeat;
background-position: right 10px center;
}
If you want to use this theme, you have to include EasyAutocomplete css theme file.
In this example I have used search icon.
Square theme uses Roboto font, which you can find in google font service: Roboto font.
Javascript:
var options = {
url: "resources/countries.json",
getValue: "name",
list: {
match: {
enabled: true
},
maxNumberOfElements: 6,
showAnimation: {
type: "slide",
time: 300
},
hideAnimation: {
type: "slide",
time: 300
}
},
theme: "round"
};
$("#round").easyAutocomplete(options);
HTML:
<input id="round"/>
[
{"name": "Afghanistan", "code": "AF"},
{"name": "Aland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"},
...
]
Javascript:
var options = {
url: "resources/countries.json",
getValue: "name",
list: {
match: {
enabled: true
},
maxNumberOfElements: 8
},
theme: "plate-dark"
};
$("#plate").easyAutocomplete(options);
HTML:
<input id="plate"/>
[
{"name": "Afghanistan", "code": "AF"},
{"name": "Aland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"},
...
]
Dark plate is really cool looking theme for autosuggest list display. It's different from simple white/grey common look.
Javascript:
var options = {
url: "resources/countries.json",
getValue: "name",
list: {
match: {
enabled: true
},
maxNumberOfElements: 5,
showAnimation: {
type: "fade"
},
hideAnimation: {
type: "fade"
}
},
theme: "funky"
};
$("#funky").easyAutocomplete(options);
HTML:
<input id="funky"/>
[
{"name": "Afghanistan", "code": "AF"},
{"name": "Aland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"},
...
]
EasyAutocomplete has a couple of additional cool looking themes. If any of them seems interesting to you, feel free to use them.
Additional themes are located in file easy-autocomplete.themes.css
. In order to use them, add this file in header section of your page.
More information about how to use this plugin, can be found in EasyAutocomplete - jquery autocomplete - guide section.