JQuery自动完成没有用所选项目填充输入

Question

我有一个由第三方网络服务填充的 jQuery UI 自动完成功能。 自动完成工作正常，但是当我从列表中选择一个项目时，自动完成输入字段变为空白。

自动完成功能用于搜索地址，一旦选择地址，该地址将被拆分为多个组件，用于填写表单的其余部分。

所以我有以下输入字段 ID： #FullAddress, #AddressLine1,#AddressLine2, #AddressSuburb,#AddressState, #AddressPostcode #FullAddress 是自动完成字段。

Web 服务返回一个对象数组，每个对象都包含键值对，名称与上面几乎相同。

原来的JS代码是这样的：

$("#FullAddress").autocomplete({
    source: "URL",
    dataType: "JSONP",
    autoFocus: true,
    select: function (event, ui) {
        $("#FullAddress").val(ui.item['FullAddress']);
        $("#AddressLine1").val(ui.item['Line1']);
        $("#AddressLine2").val(ui.item['Line2']);
        $("#AddressSuburb").val(ui.item['Suburb']);
        $("#AddressState").val(ui.item['State']);
        $("#AddressPostcode").val(String(ui.item['Postcode']));
    }
});

联系了服务器并返回了结果，但它们没有显示在下拉列表中：

单击任何选项会填写所有带有地址数据的字段（您只是看不到您选择了哪个地址）除了 #FullAddress 会被空白。即在上图中，一旦选择了一个，“123 te”就会消失。

我发现以下内容可添加到 create 事件中，该事件修复了下拉显示问题，但没有解决 #FullAddress 字段无论发生什么都会被空白的事实。

    $("#FullAddress").autocomplete({
        source: "URL",
        dataType: "JSONP",
        autoFocus: true,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $("<li>")
                    .append('<a>' + item.FullAddress + '</a>')
                    .appendTo(ul);
            };
        },
        select: function (event, ui) {
            $("#FullAddress").val(ui.item['FullAddress']);
            $("#AddressLine1").val(ui.item['Line1']);
            $("#AddressLine2").val(ui.item['Line2']);
            $("#AddressSuburb").val(ui.item['Suburb']);
            $("#AddressState").val(ui.item['State']);
            $("#AddressPostcode").val(String(ui.item['Postcode']));
        }
    }); 

有没有人知道自动完成输入字段会被清空的任何其他原因？

它似乎并不关心是否选择了一个项目，无论在模糊字段清空时发生什么。

谢谢

Answer 1

如果您将event.preventDefault(); 添加为应该停止字段清空的选择函数的第一行：

select: function (event, ui) {
    event.preventDefault();
    $("#FullAddress").val(ui.item['FullAddress']);
    ...
}