Click here to Skip to main content
13,355,335 members (71,692 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked
Posted 1 Feb 2011

jQuery UI Autocomplete with ID

, 1 Feb 2011
Rate this:
Please Sign up or sign in to vote.
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, 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.

You may also be interested in...

Comments and Discussions

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 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 1 Feb 2011
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid