Autocomplete is a very useful form user interface. By suggesting potential data, it helps user to fill in the form field correctly, hence reduce garbage data. Not just that, it also saves some precious times too.
There are many solutions out there, for example the Autocomplete from jQuery UI. This official jQuery Autocomplete plugin is good, no doubt about it, but it's heavy weight, even though it allows custom download, but I still think it's bulky.
Introducing Awesomplete - Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Created by the reputable CSS3 guru Lea Verou, Awesomplete is really awesome. However, it won't work in IE8 and mixed result in IE9 and IE10. But I'm sure it will be fixed sooner or later.
Alternatively, you can define the list like this:
There are plenty of ways, you can read it here.
It's light weight, but the features and customization aren't compromised. You can do plenty of customization with Awesomplete. It has 4 basic configurations:
- list: define where to find the list of suggestion
- minChars: Minimum characters the user has to type before the autocomplete popup shows up.
- maxItems: Maximum number of suggestions to display.
- autoFirst: Determine if the first item in the returned result should be highlighted by automatically.
Also, it has a few useful extendable properties to allow you to completely change the way Awesomplete works. Followed by a set of events and API, there's nothing you can't do with Awesomplete. You can check that out in the advanced examples section.