JQuery自动完成不填充所选项目的输入

Question

我有一个jQuery UI Autocomplete，它由第三方Web服务填充。 自动填充功能正常，但是当我从列表中选择一个项目时，自动填充输入字段会变为空白。

自动填充功能用于搜索地址，一旦选中，地址就会被拆分为其组成部分，填写表格的其余部分。

所以我有以下输入字段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

如果你在select函数中添加event.preventDefault();作为第一行应该停止字段清空：

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