Question

I have a view with a button that opens a jquery dialog via partial view. Within the dialog I have a jquery autocomplete call that works fine for listing my values. The problem is that once a value is selected and I submit the form, there’s no value in the form field.

<fieldset>
            @Html.LabelFor(m => m.Airline)
            @Html.TextBoxFor(m => m.Airline)
            @Html.ValidationMessageFor(m => m.Airline)
        </fieldset>

$(function () {

    $("#Airline").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/app/FlightLeg/AirlineSearch', type: "GET", dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Name + ' (' + item.Code + ')', value: item.Name, id: item.Id };
                    }))
                }
            })
        },
        minLength: 2,
        select: function (event, ui) {
            console.debug(ui.item.id); **//has the expected value**
            $("#Airline").val(ui.item.id)); /**/ never gets set**
        }

    });

Using firebug, I can see that no value is attributed to the textbox once a value is selected either. I’ve tried using the “select” option in the autocomplete call to set the value in textbox via .val(ui.item.id) but it will not set the value of the textbox. If i put an alert in the “select” option, it will show the value of ui.item.id.

Any idea why I can’t set the textbox value from the value of my autocomplete?

Answer 1

You should use .text() instead of .val().

val() changes the value attribute of an element, while text() changes its inner text. Textbox’s text is represented by an inner text of the element thus only by using text() you can control its text.