CODEWITHSUNDEEP
jqueryasp.net-mvc-3autocomplete
Don Fitz
Don Fitz

Reputation: 1174

ASP.Nev MVC 3 jQuery Autocomplete Textbox Value Always Blank

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?

Upvotes: 0

Views: 4521

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

There is an error on this line please correct and try it

//Extra bracket at the end
$("#Airline").val(ui.item.id)); /**/ never gets set**

//Corrected 
$("#Airline").val(ui.item.id); /**/ never gets set**

Upvotes: 1

Eran Betzalel
Eran Betzalel

Reputation: 4193

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.

Upvotes: 1

Related Questions