Question

I am using the jQuery autocomplete (http://jqueryui.com/demos/autocomplete/) and have it working but when a user selects an item it then places the value in the text box. I would like it so that when the user selects an item the label is used as the text in the textbox and the value is inserted in a hidden field ‘cId’.

I’ve had a look around and can seem to find a solution.

My values are in a string called ClientCsv like:

[ { label: "ClientId1", value: "ClientName1" }, { label: "ClientId2", value: "ClientName2" } ]

The jquery I currently use is:

$(function () {
var availableTags = [ " & ClientCsv() & " ]; $('#tags').autocomplete({ source: availableTags});
});

Form code:

<asp:TextBox ID="tags" runat="server"></asp:TextBox>
<asp:HiddenField ID="cId" runat="server" />

Thanks for any help.

Answer 1

You need to wire up the select event for the autocomplete and then prevent the default action of populating the value in the search field.

var availableTags = [{ label: "ClientId1", value: "ClientName1" }, { label: "ClientId2", value: "ClientName2"}];

$(function () {
    var txt = $('#tags');
    txt.autocomplete({ 
        source: availableTags,
        select: function(event, ui){
            //put the label in your text field
            txt.val(ui.item.label);

            //put the value in your hidden field
            $('#cId').val(ui.item.value);

            //cancel the event to prevent it populating the value
            event.preventDefault();
        }
    });
});