Question

I am using autocomplete where each variable being searched has 3 attributes (label, id, value). I want the value of a users selection to be passed to one of four hidden fields based on the id of that selection.

js file

var destinations= [
        {value: "25",label: "USA",id: "1"},
        {value: "26",label: "Midwest",id: "2"},
        {value: "27",label: "Colorado",id: "3"},
        {value: "28",label: "Denver",id: "4"}
        ];

$(document).ready(function() {
    $( "#destinations" ).autocomplete({
        minLength: 1,
        source: destinations,

        select: function( event, ui ) {
            $('#destinations').val( ui.item.label );
            $('#destinationid').val(ui.item.id);
            $('#destinationtype').val(ui.item.value);
            if ($("#destinationid").val() == 1){
            $("#results1").text($('#type1').val());
        }
        if ($("#destinationid").val() == 2){
            $("#results2").text($('#type2').val());
        }
        if ($("#destinationid").val() == 3){
            $("#results3").text($('#type3').val());
        }
        if ($("#destinationid").val() == 4){
            $("#results4").text($('#type4').val());
        }
    },

        focus: function( event, ui ) {
            $("#destinations").val( ui.item.label );
            return false;
        }
    });

});

In my html, I have the following: (i don’t have them hidden for testing purposes.)

<input id="destinations" /> 
<input type="hidden" input id="type1" /> 
<input type="hidden" input id="type2" />
<input type="hidden" input id="type3" />
<input type="hidden" input id="type4" /> 

The autoselect is pulling the labels fine, but when i select one, it changes the selection to its value rather than keeping the label. It is also not putting the value in the corresponding text box and just leaving the value in the first text box.

Any suggestions would be appreciated.

Answer 1

I was able to figure it out thanks to Jason pointing me in the right direction. Its not perfect yet, but its doing what I want. http://jsfiddle.net/pkracer/RADGs/