jQuery Autocomplete

Most of the applications have input functionality ,user can enter values in the input fields on the page.There may be input fields for different things like giving user the option to enter his birthplace, city ,country and lot of other options.If the user has to type values for all of these fields it can be tiring for the user.

To help the user to enter these values our application can provide suggestions as the user types in the input field.User can chose a value from the suggestions instead of manually typing all the values.

Below is an input field where user can enter the country.Instead of typing the entire country name,user can select the value from the suggestions.The suggestions are displayed automatically as the user starts typing in the textbox.

We can include such autosuggestion  functionality using the jQuery autocomplete widget.In this tutorial we will see how to add the autocomplete widget to our page.

We can use the autocomplete widget in our application by following the below steps.

1.Declare an input field and set its id.We are setting the id as country in the following field

Countries<input type="text" id="countries" />

2.Attach the autocomplete widget with the input element.
We can attach the widget with the input field by calling the .autocomplete() on the input element.We are attaching the country input element with the autocomplete widget

$(document).ready(function () {
$('#countries').autocomplete();
                 });

3.Pass an object to the autocomplete() having a property “source”.
Source is an array which contains the list of all the elements we want to display to the user as he types.We will define source in the next step.

$(document).ready(function () {
$('#countries').autocomplete({ source: countries });
                 });

4.Define the source.
Source is a javascript array.We can declare this array in javascript or we can return the source from the server.Usually if we have source containing lot of elements we return the source from the server.

 var countries=[
                 "United States",
                 "United Kingdom",
                 "Uzbekistan",
                 "Uruguay"
                           ]

Though we have defined the source in the javascript we can fetch the source from the server using ajax.To retrieve the  data from the server we can assign a function to the source property which makes an ajax call to the specified url

$('#countries').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCountries",
dataType: "json",
success: function (data) {
return data.Name;
//return the data fetched from the server
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//error occured
}
})
} });

Label and Value Whenever the user selects any value from the autosuggestion list ,the selected text is displayed in the input text field.But by including the Label and Value we can populate the Value in the textbox while Label value will be displayed to the end user.

minLength  By default the autocomplete will start making suggestions as soon as we type the first character in the input field.But we can change this by setting the minLength property.Suppose we set this property to 3 then the autocomplete will provide suggestion only when the third character is typed.This is useful if the source contains lots of records.

Follow on: