jQuery

jQuery UI Autocomplete Example

In this example, we’re going through a very useful widget of jQuery, autocomplete().

Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.
 

1. Document Setup

In order to have a good start, after creating a new HTML document, add the following basic syntax and jQuery links into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete Example</title>

<!-- LINKS SECTION  -->
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css"/>

<!-- JAVASCRIPT SECTION  -->

</head>
<body>
<!-- HTML SECTION  -->

</body>
</html>

Now that we’ve included the most important links like the jquery-ui and jquery javascript files, we’re ready to create a basic autocomplete field.

2. Basic Autocomplete Input Field

So basically, what we’re doing here is creating a variable inside a function, which will hold the actual suggested (autocomplete) words, and then use that source to populate the filtered list as we type in the input field. The schema below shows how we’re structuring our code to do this:

Our Code Structure
Our Code Structure

That’s it. Let’s go ahead and do it:

<!-- HTML SECTION  -->

<div class="ui-widget">    <!-- this class could be anything you want -->

  <label for="people">Tags: </label>

  <input class="people"> 

</div>
<!-- JAVASCRIPT SECTION  -->

<script>

  $(function() {

    var names = [

      "Alban",
      "Andy",
      "Ajax",
      "Bob",
      "Cody",
      "Chloe",
      "Camela",
      "Charlotte",
      "Ciara",
      "Ella",
      "Fabio",
      "George",
      "Helen",
      "Juliet",
      "James",
      "Lory",
      "Patricia",
      "Peter",
      "Roxanna",
      "Randi",
      "Selena",
      "Sara"
    ];

    $(".people").autocomplete({
    /*refer to the same id that input has*/
      source: names
    /*set the source name that you gave your array variable*/
    });
  });
  </script>

Trying this out in the browser would result in getting constant suggestions as we type:

Basic Autocomplete Example

3. Autocomplete Options

Autocomplete has some interesting options that will be helpful when using the autocomplete method. Below, we’ll have a look at some of them.

3.1 AppendTo

Add a new element in HTML, that will be the element where filtered words will be added.

<!-- HTML SECTION  -->
<div class="ui-widget">   
  <label for="people">Tags: </label>
  <input class="people">
  <p class="para"></p> 
  </div>

Now initialize the autocomplete with the appendTo option specified:

    
$(".people").autocomplete({
    appendTo: ".para"
});

Get or set the appendTo option, after initialization:

    
// Getter
var appendTo = $( ".people" ).autocomplete( "option", "appendTo" );

// Setter
$( ".people" ).autocomplete( "option", "appendTo", ".para" );

The result would show names getting appended to the paragraph as soon as they are searched by a letter:

3.2 Delay

The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

Initialize the autocomplete with the delay option specified:

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

Get or set the delay option, after initialization:

// Getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
// Setter
$( ".selector" ).autocomplete( "option", "delay", 500 );
Delay Option of Autocomplete
Delay Option of Autocomplete

3.3 Disabled

Disables the autocomplete if set to true.

Initialize the autocomplete with the disabled option specified:

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

Get or set the disabled option, after initialization:

// Getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
// Setter
$( ".selector" ).autocomplete( "option", "disabled", true );
Disabled Autocomplete - Nothing Happens
Disabled Autocomplete – Nothing Happens

3.4 minLength

The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

Initialize the autocomplete with the minLength option specified:

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

Get or set the minLength option, after initialization:

// Getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
// Setter
$( ".selector" ).autocomplete( "option", "minLength", 2 );

As a result, autocompletion will only start after typing the second character in the input field:

Autocomplete minLength Option
Autocomplete minLength Option

3.5 Source

Defines the data to use, must be specified. It may be an Array, a String or a Function.

Initialize the autocomplete with the source option specified:

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

Get or set the source option, after initialization:

// Getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// Setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );

Notice that we already used the source option as the most basic option, but we used an array of names apart, instead of inline declaration.

4. Conclusion

The autocomplete widget is a useful tool to consider when dealing with input fields, it gives the user a suggestion (or maybe a hint) on what the input can be filled with. As we saw here, it is highly customizable and helps you optimize it. For more information on the autocomplete widget, feel free to use the official jQuery UI wesbite and specifically this topic.

5. Download

Download
You can download the full source code of this example here: jQuery UI Autocomplete

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button