Question

I am using JQuery UI Autocomplete with an ASP.NET Textbox to populate the label as well as the value. Here is where i map the data from an ajax call:

success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.label,
            value: item.value
        }
    }));
}

The label is the text, the value is a number used to identify that row. My problem is when the user selects an option, the textbox replaces the label with the value. So if they select ‘John Smith’, the textbox changes from ‘John Smith’ to ‘1234’, etc. How can I manipulate the select event to leave the text in the textbox? Any help is appreciated. Thanks!

Here is a more complete view of my aspx page:

    <div class="ui-widget">
        <asp:TextBox ID="txbSearchKeyword" runat="server" Columns="50" />
    </div>
    <asp:HiddenField ID="selectedRecordId" runat="server" />

and the Jquery:

(function () {
    $("#txbSearchKeyword").autocomplete
    ({
        source:
            function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "AutoComplete.asmx/GetAutoCompleteList",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ keywordStartsWith: request.term }),
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
        minLength: 2
    });

    $("#txbSearchKeyword").autocomplete
    ({
        select: function (event, ui) {
            $('#selectedRecordId').val(ui.item.value);
            DoSomethingwithdataAJAXfunction(ui.item.value);
        }
    });
})();

Answer 1

Perhaps some of this snippet will help you:

select: function(event, ui) {
    var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null);
    if (hasValue) {
        var focusedElement = $(this);
        focusedElement.val(ui.item.label);
        return false;
    }
    else {
        return false;
    }
},
focus: function(event, ui) {
    return false; // return "true" will put the value (label) from the selection in the field used to type
},

As an aside, I do not know why you have things separated when:

minLength: 2
 });
  $("#txbSearchKeyword").autocomplete
 ({ 
    select:...

could simply be:

minLength: 2,
select:...