Jquery-UI 自动完成设置所选文本为 0

Question

我有一个包含一行文本框的表格 - 类别、制造商和型号。

当用户在模型字段中输入值时，我想显示一个自动完成框，其中显示与他们输入的内容类似的匹配项。选择其中一个值后，我想根据所选内容预先填写类别、制造商和型号字段。

除了 Model 字段之外，这一切似乎都运行良好 - 无论选择什么，该字段都被设置为 0（即，即使您选择了第三项，它仍然是 0，所以它不是正在设置的索引值）设置）

这段代码有什么问题？ “自动完成选择”似乎正在设置类别和制造商，而不是包含下拉列表的模型字段。

注意：我无法将模型设置为自动完成的文本，因为我将其显示为制造商 - 模型。

这是代码：

// 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);
});

Answer 1

休息两周后回到这个问题，我立即发现了问题。

select

函数位于源/ajax查询中，而不是作为自动完成属性的属性。

$("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,

})

应该是：

$("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,

})