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

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

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