How to do jQuery autocomplete that passes a id and not a name?

Question

I was looking for jQuery UI Autocomplete because I needed on a <input /> but the problem is that I need to pass the id of the name completed. Let me explain:

I have an array of names:

$names = array(
    array('name' => 'John', id => '1'),
    array('name' => 'Sarah', id => '2'),
    array('name' => 'Josh', id => '3)
);

And then, with AJAX, the input will be autocompleted with one name of the array but then, when I submit, I need the id and not the name. How can I manage?

Thanks in advance

Answer 1

The JQuery UI Autocomplete control can accept the list of search results as a set of Display/Value objects.

From memory, you create a Json object in the following format...

[
    {label:"Display Name for result 1", value:1},
    {label:"Display Name for result 2", value:2},
    {label:"Display Name for result 3", value:3}
]

The label property contains the text to display and the value proberty contains the id. These values can be inspected when a search result is selected by the user. The control has a select event that you can listen for.