jQuery UI autocomplete with item and id

Question

I have the following script which works with a 1 dimensional array. Is it possible to get this to work with a 2 dimensional array? Then whichever item is selected, by clicking on a second button on the page, should display the id of whichever item is selected.

This is the script with the 1 dimensional array:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; $("#txtAllowSearch").autocomplete({     source: $local_source }); 

This is the script for the button to check the id, which is incomplete:

$('#button').click(function() {     // alert($("#txtAllowSearch").someone_get_id_of_selected_item); }); 

Answer 1

You need to use the ui.item.label (the text) and ui.item.value (the id) properties

$('#selector').autocomplete({     source: url,     select: function (event, ui) {         $("#txtAllowSearch").val(ui.item.label); // display the selected text         $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input     } });  $('#button').click(function() {     alert($("#txtAllowSearchID").val()); // get the id from the hidden input });  

[Edit] You also asked how to create the multi-dimensional array...

You should be able create the array like so:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"],                       [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Read more about how to work with multi-dimensional arrays here: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

From the Overview tab of jQuery autocomplete plugin:

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.

So your "two-dimensional" array could look like:

var $local_source = [{     value: 1,     label: "c++" }, {     value: 2,     label: "java" }, {     value: 3,     label: "php" }, {     value: 4,     label: "coldfusion" }, {     value: 5,     label: "javascript" }, {     value: 6,     label: "asp" }, {     value: 7,     label: "ruby" }]; 

You can access the label and value properties inside focus and select event through the ui argument using ui.item.label and ui.item.value.

Edit

Seems like you have to "cancel" the focus and select events so that it does not place the id numbers inside the text boxes. While doing so you can copy the value in a hidden variable instead. Here is an example.