Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

JQuery_UI_logo_color_onwhite-300x72.png

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?! Smile | :)

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.

License

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

Share

About the Author

AlexCode
Architect
Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.
 
Find more at on my blog.

Comments and Discussions

 
QuestionGreate article PinmemberSumaNarayanan9-Nov-12 22:07 
Really saved lots of my time. Many thanks!!!!!!
Suma

Questionchange event not fire until lost focus the textbox control PinmemberYasithl31-Oct-12 23:47 
AnswerRe: change event not fire until lost focus the textbox control PinmemberYasithl31-Oct-12 23:53 
GeneralMy vote of 5 PinmemberMember 443291817-Sep-12 6:13 
GeneralRe: My vote of 5 PinmemberAlexCode17-Sep-12 20:18 
QuestionjQuery-UI-Autocomplete-with-ID PinmemberMARIANO MOLINA8-Jul-11 1:46 
AnswerRe: jQuery-UI-Autocomplete-with-ID PinmemberAlexCode10-Jul-11 14:40 
GeneralRe: jQuery-UI-Autocomplete-with-ID PinmemberMARIANO MOLINA13-Jul-11 6:40 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 1 Feb 2011
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid