The autocomplete widget in jQuery UI
The jQuery UI library comes up with a very useful plugin that you can use quite easily, otherwise, you have to write a lot of codes, called autocomplete. In this faster world of the internet, visitors really appreciate websites with handy features that let them not memorize or suggest words based on their first few letters. Also letting users complete form fields like a textbox with pre-defined values adds good user experience.
According to a study, visitors tend to buy more from sites that are faster, and provide them with the auto-complete feature in various possible fields. The search engines, especially Google and Bing also focus incredibly on the user experience to rank the website higher, apart from many other ranking factors.
The jQuery autocomplete UI widget can be associated to an input field where a user may enter something like in a textbox, textarea, or <input> elements (textbox, dropdown, etc.). As a user enters a letter, the widget starts searching for matches and displays the list of matched words.
As more letters are entered, the displayed results will keep on filtering that user can select.
So, from where the autocomplete jQuery searches and display matched terms? The data sources can be different and quite flexible. It can be a pre-defined list of terms in an array within a page itself. The source can be a different data source like a database, the JSON file, etc.
In this tutorial, I will show you an example of using the jQuery UI autocomplete plugin in different ways and with different data sources.
An example of autocomplete using US states in an array
In this example, I will use US States in an array of jQuery. As you enter a letter, for example, ‘n’ it will search for n letter inside each array item of the US States. The list will be long as many states contain ‘n’ letter. As you enter the second letter e.g. ‘e’ the list will be further filtered. Experiment this with different letters.
See online demo and code
The code used in jQuery section:
<script>
$(function() {
var USStates = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
$( "#USstate" ).autocomplete({
source: USStates
});
});
</script>
The Markup:
<div class="ui-widget"> <span>Enter State: </span><input id="USstate"> </div>
Let me go through what is done in the code to create a basic jQuery autocomplete:
- First of all, the code included dependent files i.e. jQuery and jQuery-ui libraries. If you are only using the autocomplete plugin for the web page then you may want to use a smaller version that just contains code related to jQuery UI autocomplete plugin. To customize your download, go to this link and select only what you require for the project: http://jqueryui.com/download/
- I have also included the default CSS file by jQuery UI. In later examples, we will style it differently and with our own CSS.
- Inside <script> section, first I created an array of US State names followed by calling the autocomplete plugin. After that, an <input> field inside the body section with ID= USstate is created that is referred while calling jQuery autocomplete plugin.
- Finally, you have to specify the source option, where data will be pulled to be shown inside the <input> field. In our case, the source is the array that we just created i.e. USStates.