This is any example of the most simple autocomplete list you can make. An array of strings is provided to the list and the autocomplete control handles the rest automatically. By default strings will be rendered in a list, and have full search
capabilities (case insensitive).
Lists can be controlled by using the keyboard. If the input field has focus then using the down arrow key the autocomplete will appear. Once visible you can use the up and down arrow keys to navigate through the list of items and the return
key to select an item from the list.
Example Code:
var country_list = ["Afghanistan", "Albania", "Algeria", ....];
$('#input-field').richAutocomplete({
items: country_list
});
Some autocomplete lists may require more detailed items in the lists, with more information than a simple string. To do this you can provide some further options to configure how the list items should display, but also how to search the items and how
to extract the main text from each time when the item is selected.
Example Code:
var people_list = [
{
name: 'John Smith',
age: 54
},
{
...
}
];
$('#name-field').richAutocomplete({
items: people_list,
extractText: function(item) {
return item.name;
},
filter: function(items, searchTerm) {
return items.filter(function(item) {
return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
});
},
render: function(item) {
return '<p>' + item.name + '</p><small>' + item.age + '</small>';
},
});
The extractText function should take in one parameter which will be an item from the array of items. It should return the main text of the item.
The filter function should take in two parameters. The first will be the list of all items and the second is the search term. This function should return any items that meet the search term.
The render function should take in one parameter which will be an item from the array of items and return either a string containing the HTML that should be within the list item or an HTMLElement or jQuery element.