CODEWITHSUNDEEP
jquery-uijquery-ui-autocomplete
Gavin Coates
Gavin Coates

Reputation: 1425

Jquery-UI Autocomplete Setting Selected Text As 0

I have a table containing a row of textboxes - Category, Manufacturer and Model.

When the user types a value in to the Model field, I want to show an autocomplete box showing similar matches to what they type. On selecting one of the values, I then want to pre-fill the Category, Manufacturer and Model fields based on what was selected.

This all seems to be working well, apart from the Model field - which is being set to 0, regardless of what is selected (i.e even if you select the 3rd item, it's still 0, so it's not the index value that is being set)

What is wrong with this code? The "autocompleteselect" seems to be working at setting the category and manufacturer, just not the model field containing the dropdown.

Note: I cant se the model to the text of the autocomplete, as I'm displaying this as Manufacturer - Model.

Here's the code:

// Autocomplete list of models
$("input[name$='Model']", newrow).autocomplete({
   source: function (request, response) {
    $.ajax({
        url: `@ViewBag.API/api/modeldatabase/models`,
        dataType: "json",
        data: {
            term: request.term
        },
        success: function (data) {
            response(data)
        },
        select: function (event, ui) {
            $("input[name$='Model']").val(ui.item.model);
        }
    })
},
minLength: 2,

}).data("ui-autocomplete")._renderItem = function (ul, item) {
   return $("<li></li>")
    .data("ui-autocomplete-item", item)
    .append("<a>" + item.manufacturer + " - " + item.model + "</a>")
    .appendTo(ul);
};
   $("input[name$='Model']", newrow).on("autocompleteselect", function (event, ui) {
   $("select[name$='Category']", newrow).val(ui.item.category);
   $("input[name$='Manufacturer']", newrow).val(ui.item.manufacturer);
   $("input[name$='Model']", newrow).val(ui.item.model);
});

Upvotes: 0

Views: 22

Answers (1)

Gavin Coates
Gavin Coates

Reputation: 1425

Returning to this problem after a 2 week break, Ive found the problem instantly.

The select functionw as located within the source/ajax query, rather than as a property of the autocomplete property.

$("input[name$='Model']", newrow).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: `@ViewBag.API/api/modeldatabase/models`,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response(data)
            },
            select: function (event, ui) {
                $("input[name$='Model']").val(ui.item.model);
            }
        })
    },
    minLength: 2,

})

Should be:

$("input[name$='Model']", newrow).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: `@ViewBag.API/api/modeldatabase/models`,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response(data)
            },
            
        })
    },
    select: function (event, ui) {
        $("input[name$='Model']").val(ui.item.model);
        return false;
    }
    minLength: 2,

})

Upvotes: 0

Related Questions