JQuery Autocomplete: Making It Easy for End Users

jquery autocomplete exampleJQuery is primarily used to make it easier to use JavaScript on your website or webpage. It is a JavaScript library that wraps up JavaScript inside methods, so that you don’t have to write multiple lines of code for common functionality.  JQuery is compatible with most browsers today, and it can be run on mobile devices as well. In order to effectively use  jQuery, you first need to know basics of JavaScript, HTML and CSS. These languages are used in conjunction with jQuery (here’s a basic course which shows how these languages work together). It would also be quite useful to make sure your JavaScript fundamentals are sound, like we show in this course.

Today, we’ll be discussing jQuery autocomplete. We assume you already have a basic working knowledge of jQuery. If you’re looking to pick up jQuery quickly, you can sign up for our 1 hour jQuery course.

Forms in jQuery

Ever paid attention to that part of the web page that asks you to enter your email, id, or contact number? Well, that’s a ‘form’. Ever filled out an online questionnaire or survey? Chances are it was created using a jQuery form. Basically any part of a web page that requests any user information, is a form. You can create a form in many ways. You can use HTML, JavaScript, or even jQuery. This course shows how to create a form using JavaScript and this indepth course shows how to create different kind of forms in PHP. Basically a web developer is spoiled for choices, when it comes to form creation. Do take the time to learn to create your own forms, before moving ahead.

As an extra step, you may want to learn how to create or setup automatic validation for your forms. You can learn how to do that in our earlier tutorial on automating form validation using jQuery.

What is Autocomplete?

So as we get into forms, what exactly is autocomplete? Can the form, or your programming language, actually guess and complete the form for you? Kind of. Autocomplete is a technique whereby you can users to quickly find and select from a pre-determined set of values, while they type. The pre-determined values are stored in an internal data base. The autocomplete algorithm leverages advanced search and filtering techniques, to match what the user is typing, against this data base. Remember the Google search page and how Google seems to magically guess and suggest while you’re typing out your search query – well, that’s an example of autocomplete at work!

The Autocomplete Widget in JQuery

Like we mentioned earlier, jQuery has a plethora of plugins and widgets specially designed to make common tasks easier. The best way to provide an autocomplete functionality on your webpage with jQuery, is to use the AutoComplete widget. Lets work our way through this with examples. Here’s the basic syntax:

$( ".selector" ).autocomplete({ source: [ "c", "java", "php", "javascript", "asp", "ruby" ] });

This line here initializes the autocomplete ie it creates the database that you’ll pull up autocomplete options from. If you want to check the options at a later stage you can use the following:

/ getter
var source = $( ".selector" ).autocomplete( "option", "source" );

To change the list of options at any point, you can call the setter like shown below:

// setter
$( ".selector" ).autocomplete( "option", "source", [ "c", "java", "php", "javascript", "asp", "ruby" ] );

You can set a whole bunch of options for the autocomplete. Here are the most popular ones

The Autofocus Option

This options lets you autofocus on the first item in your menu database. If set to true the first item will automatically be focused when the menu is shown.  Here’s how to initialize the autocomplete with the autoFocus option specified:

$( ".selector" ).autocomplete({ autoFocus: true });

To get or set the autoFocus option, after initialization:

// getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );

// setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );

The Delay  Option

This option lets you program a certain delay or wait time from when the keystroke occurs, to the instant when the menu options should appear. Normally you would want this to be as small as possible. Here’s the syntax for this:

$( ".selector" ).autocomplete({ delay: 400 });

To get or set the delay option, after initialization, here’s what you can do:

// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );

// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );

The minLenght Option

This specifies the minimum number of characters a user must type before we start searching for a match. If you have a small data base, you can keep this to a low value. For larger database or menu options, you would want to keep this to a minimum of a few key strokes – else you may end up spending a lot of time searching through a large database at the start itseld. To iInitialize the autocomplete with the minLength option specified:

$( ".selector" ).autocomplete({ minLength: 0 });

To get or set the minLength option, after initialization:

// getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );

// setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );

The Disable Method

To temporarily disable the autocomplete, you can use the disable option. Note that this method does not take any arguments. The syntax is a simple:

$( ".selector" ).autocomplete( "disable" );

The Close Method

To close the autocomplete menu, you can use the close method. Note that this method does not take any arguments. Again, the syntax is a simple:

$( ".selector" ).autocomplete( "close" );

The Destroy Method

If you want to completely remove the autocomplete, and make sure it never runs again, you will have to destroy it. Note that this method does not take any arguments. Once this command is run, if you want to have the autocomplete back, you’ll have to start all over again from scratch. There’s the syntax:

$( “.selector” ).autocomplete( “destroy” );

We hope this gives you a good basis to start adding autocomplete to your forms. You may get more in depth with this course to master jQuery UI and widgets.