Click here to Skip to main content
15,117,279 members
Articles / jQuery
Technical Blog
Posted 1 Feb 2011

Tagged as


6 bookmarked

jQuery UI Autocomplete with ID

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
1 Feb 2011CPOL2 min read
The jQuery UI auto-complete widget is great; it just works, and is very easy to customize.



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}];

     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}];

     source: req,
     change: function (event, ui) { alert(; } });

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.

This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

Comments and Discussions

QuestionGreate article Pin
SumaNarayanan9-Nov-12 23:07
MemberSumaNarayanan9-Nov-12 23:07 
Questionchange event not fire until lost focus the textbox control Pin
Yasithl1-Nov-12 0:47
MemberYasithl1-Nov-12 0:47 
AnswerRe: change event not fire until lost focus the textbox control Pin
Yasithl1-Nov-12 0:53
MemberYasithl1-Nov-12 0:53 
GeneralMy vote of 5 Pin
Member 443291817-Sep-12 7:13
MemberMember 443291817-Sep-12 7:13 
GeneralRe: My vote of 5 Pin
AlexCode17-Sep-12 21:18
professionalAlexCode17-Sep-12 21:18 
QuestionjQuery-UI-Autocomplete-with-ID Pin
MemberMARIANO MOLINA8-Jul-11 2:46 
AnswerRe: jQuery-UI-Autocomplete-with-ID Pin
AlexCode10-Jul-11 15:40
professionalAlexCode10-Jul-11 15:40 
GeneralRe: jQuery-UI-Autocomplete-with-ID Pin
MARIANO MOLINA13-Jul-11 7:40
MemberMARIANO MOLINA13-Jul-11 7:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.