jQuery UI TextBox AutoComplete with Remote Data Source (Back to Basics)

The jQuery Autocomplete widget was reintroduced in jQuery UI 1.8. It is a simple widget attached to a text input field and can be connected to a range of data sources. It provides suggestions in a dropdown menu as the user begins typing in the textbox. In  a previous article Getting started with jQuery and jQuery UI – Back to Basics, we briefly introduced the jQuery UI AutoComplete widget. If you have never used any of the jQuery UI controls, then before proceeding further, I recommend you to click here to understand how to setup jQuery UI.

In this recipe, we will start by using a simply array as a datasource for the autocomplete widget; and then in the subsequent example, we will use a remote datasource.

Create a new HTML file called ‘Autocomplete.html’ and declare a textbox in your <body> element:

<input id="myText" />

To enable this as an autocomplete textbox, write the following code:

$(function () {
    var dataSrc = ["australia", "austria", "antartica", "argentina", "algeria"];

Here we have implemented a basic autocomplete with a local array as its data source. The source option is mandatory to which we are specifying a local array of strings.

Save and run this file in the browser and as you start typing the first alphabet, it is matched against a list of the countries defined in our array and the matches get displayed in a drop-down menu attached to the <input>.


Note: If you are using the jquery-ui.min.css file in your projects, you may encounter a message that says “5 results are available, use up and down arrow keys to navigate”. This behavior occurs especially when you are using jQuery UI 1.9 onwards. The jQuery UI team has added ARIA live regions to announce when results become available and how to navigate through the list of suggestions. This is helpful for screen readers. You can easily turn it off by adding this line of code after your reference to the css file .ui-helper-hidden-accessible { position: absolute; left: -9999px; }

Live Demo: http://www.jquerycookbook.com/demos/S2-InputControls/16-Autocomplete.html

jQuery TextBox Autocomplete with Remote Data Source

Our previous example was a simple one where we used an array defined locally. To use the Autocomplete widget to the best of its capability, we should bind it to an external data source.

We will be using the remote API http://www.geobytes.com/free-ajax-cities-jsonp-api.htm which is free to use (upto <50K requests per day), supports JSON-P and does not require an API key to work (as of this writing).

Note: This service is up and running at the time of this writing, but I cannot guarantee its uptime or existence. In case, this service goes offline, simply replace the API with another one of your choice that supports JSON-P.

Note 2: You can run this example without a web server. However because of how AJAX works, you cannot run any of the AJAX examples (especially in Chrome browser) without using a web server like IIS.

If you are new to JSON-P, please refer to JSON and JSONP in jQuery – Back to Basics before proceeding.

Create a new HTML file called ‘Autocomplete-ajax.html’ and add the following HTML:

    <input id="myText" />

Use the following code to bind the Autocomplete widget to the Geobytes API:

$(function () {
    var getData = function (request, response) {
            "http://gd.geobytes.com/AutoCompleteCity?callback=?&q=" + request.term,
            function (data) {
    var selectItem = function (event, ui) {
        return false;
        source: getData,
        select: selectItem,
        minLength: 4,
        change: function() {
            $("#myText").val("").css("display", 2);

Here we are using the getData() function as the value of our AutoComplete source option. This function is called every time the user enters text in the <input> field. We first make a JSONP request to the Geobytes API containing the data. The data returned is passed to the response callback function, which is passed to the source function as the second argument.

As already explained in a previous article Getting started with jQuery $.ajax() – Back to Basics, you can’t send an XMLHTTP request to a different domain. The workaround is to use JSONP where we use &jsoncallback=? In the url to notify the external website that we want to receive JSONP data. Internally jQuery’s $.getJSON() function treats this request as if the web browser was requesting an external JavaScript file and thus makes the call successful.

We then define the selectItem handler for the autocomplete’s select event. This function is automatically passed two arguments, which are the event object and a ui object containing the suggestion that was selected.

The getData and selectItem are then passed to the Autocomplete source option and select event respectively. We are also setting the minLength option which specifies the minimum number of characters a user must type before a search is performed. If your data source is large, a single character search could match a few thousand items. In such cases, it is best to specify minLength to a higher value like 3 or 4.

Save and view the file in your browser. In the textbox, type minimum of 4 characters and the autocomplete will display some suggestions.


Live Demo: http://www.jquerycookbook.com/demos/S2-InputControls/16.1-Autocomplete-ajax.html


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: