jQuery UI Autocomplete with ID

Introduction

The jQuery UI auto-complete widget is great. Basically, it just works and is very easy to customize.

The Problem

By default, this control supports the retrieval of Text and Value for the selected item but still needs a tweak or two.

What I'm about to show here is how to:

• Use the basics of the control
• Use and store the item ID
• Don't show the ID on the textbox while selecting an item

The Basics

The basic idea is to pass a JSON array of strings and it will do the rest.

var req = ["item 1", "item 2", "item 3"];
$('#txtRequestor').autocomplete({ source: req });

Storing the selected item ID

In the real world, nothing is this simple, and we usually have an ID for each item on the list. We may use this ID in several ways, but the more obvious method is to store the selected ID on the database. This is still very simple, just feed the control some JSON objects instead of simple strings.

Note that each item must at least have the following structure:

• label - Represents the display text
• value - Represents the item value (the ID in our case)

var req = [
  {"label":"item 1", "value":1}, 
  {"label":"item 2", "value":2}, 
  {"label":"item 3", "value":3}];

$('#txtRequestor').autocomplete({ 
     source: req,
     change: function (event, ui) { alert(ui.item.value); } });

Using the change event, we can handle the selected item ID and store it in a variable for later use.

Not showing the value (ID) on the textbox

If you have tried the code above, you would have got annoyed with the fact that our ID is being shown on the textbox while we select an item from the list. Haven't you?! :)

To avoid this is very simple, we must change our JSON object a little as follows:

var req = [
  {"label":"item 1", "value":"item 1", "id": 1}, 
  {"label":"item 2", "value":"item 2", "id": 2}, 
  {"label":"item 3", "value":"item 1", "id": 3}];

$('#txtRequestor').autocomplete({ 
     source: req,
     change: function (event, ui) { alert(ui.item.id); } });

As you can see, I just added a new property to each item for our ID value. This will foul the control passing the same value as both display and value, and have a "backup" property that holds the actual ID value.