Настройка jQuery-UI Autocomplete для установки выбранного текста как 0

На чтение 3 мин Опубликовано 16.09.2024

У меня есть таблица, содержащая строку текстовых полей – Категория, Производитель и Модель.

Когда пользователь вводит значение в поле Модель, я хочу показать выпадающий список с автозаполнением, отображающий схожие варианты с тем, что они напечатали. При выборе одного из значений я хочу заранее заполнить поля Категория, Производитель и Модель на основе выбранного.

Все это, кажется, работает хорошо, за исключением поля Модель, которое устанавливается в 0, независимо от того, что выбрано (т.е. даже если вы выбираете 3-й элемент, оно все равно 0, то есть это не индексное значение, которое устанавливается)

Что не так с этим кодом? Функция “autocompleteselect” вроде бы работает на установку категории и производителя, просто не работает для поля модели, содержащего выпадающий список.

Примечание: я не могу установить модель текстом автозаполнения, так как я отображаю это как Производитель – Модель.

Вот код:

// Список моделей с автозаполнением
$("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);
});

Ответ

Проблема в вашем коде заключается в неправильном определении функции-обработчика события select для автозаполнения. Эта функция должна быть определена на уровне настроек автозаполнения, а не внутри источника данных AJAX. Ваш текущий код устанавливает значение Model в 0, потому что поле Model всегда заполняется при выборе элемента, и из-за неправильно определенного контекста это значение может не сохраняться должным образом.

Вот исправленный вариант вашего кода:

// Автозаполнение списка моделей
$("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);
           }
       });
   },
   minLength: 2,
   select: function (event, ui) {
       // Устанавливаем значения для полей Category и Manufacturer здесь
       $("select[name$='Category']", newrow).val(ui.item.category);
       $("input[name$='Manufacturer']", newrow).val(ui.item.manufacturer);
       $("input[name$='Model']", newrow).val(ui.item.model); // Устанавливаем модель
   }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
   return $("<li></li>")
       .data("ui-autocomplete-item", item)
       .append("<a>" + item.manufacturer + " - " + item.model + "</a>")
       .appendTo(ul);
};

Объяснение изменений:

Перемещение функции select: Я перенёс функцию select в область конфигурации самого виджета автозаполнения, чтобы она срабатывала по событию выбора элемента из списка, и значения полей устанавливали корректно.
Устранение лишнего кода в success: Я убрал установку значения поля Model внутри бывшей функции success. Теперь это происходит в единой функции select, что делает код более управляемым и понятным.

Теперь при выборе элемента из списка автозаполнения модель будет корректно устанавливаться в поле Model, а категории и производители также будут обновляться согласно выбранному элементу. Убедитесь, что ваш API возвращает корректные значения для category, manufacturer и model, чтобы избежать проблем с некорректными данными.