UI Autocomplete total confusion

[shmoyko]

I spent all day trying to figure this one out.

I need to autocomplete an <input> field from the following list:
source: [{"name":"Some Name","id":1},{"name":"Some Othername","id":2}]

How can I use the jQuery UI autocomplete to
1. display the name in the autocomplete pop-out, and
2. insert the id into a hidden field when the name is selected

The form is simple:

<form name="blah" method="post" action="...">
<fieldset>
<input type="text" name="np_from" />
<input type="hidden" name="np_id" id="np_id" />
</fieldset>
</form>


Many thanks.

[SB65]

Something like:

$(document).ready(function() {
$("input#np_from").autocomplete({
source: [{"value":"Some Name","id":1},{"value":"Some Othername","id":2}],
select: function(event,ui){
$('#np_id').val(ui.item.id)}
});
});


with html:

<form name="blah" method="post" action="...">
<fieldset>
<input type="text" id="np_from" name="np_from" />
<input type="hidden" name="np_id" id="np_id" />
</fieldset>
</form>

[shmoyko]

That worked, thanks!

So, the general rule is that if you specify a key called "value" in the source array, UI Autocomplete will just display that? Are any other "special" keys?

[SB65]

From http://jqueryui.com/demos/autocomplete/

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.