jQuery UI autocomplete with item and id

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

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.

My code only worked when I added 'return false' to the select function. Without this, the input was set with the right value inside the select function and then it was set to the id value after the select function was over. The return false solved this problem.

$('#sistema_select').autocomplete({    minLength: 3,    source: <?php echo $lista_sistemas;?> ,    select: function (event, ui) {         $('#sistema_select').val(ui.item.label); // display the selected text         $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input         return false;     },    change: function( event, ui ) {        $( "#sistema_select_id" ).val( ui.item? ui.item.value : 0 );    } });

In addition, I added a function to the change event because, if the user writes something in the input or erases a part of the item label after one item was selected, I need to update the hidden field so that I don´t get the wrong (outdated) id. For example, if my source is:

var $local_source = [       {value: 1,  label: "c++"},        {value: 2,  label: "java"}]

and the user type ja and select the 'java' option with the autocomplete, I store the value 2 in the hidden field. If the user erase a letter from 'java', por exemple ending up with 'jva' in the input field, I can´t pass to my code the id 2, because the user changed the value. In this case I set the id to 0.