Question

我无法从此自动完成功能渲染菜单。我尝试将items.autocomplete更改为ui-autocomplete-items。

我尝试使用.autocomplete('instance')代替.data('autocomplete')，我也尝试使用内联和外部函数来覆盖_renderItem，但无济于事。所有都无法静默渲染菜单（检查员显示没有项目的隐藏菜单），除了.autocomplete('instance')返回undefined，因此我无法向其添加功能。

不幸的是，由于建议服务是私有的和专有的，我无法提供工作演示，但是我已经在代码下面提供了示例数据，供任何希望尝试自己制作演示的人（可能需要使用JSONP更改为JSON）。我无法更改我的代码以使用JSON，因为该服务在另一个域上，这是访问它的唯一方法。

谁能看到我在这里做错了什么？我已经用尽了所有关于这个主题的所有其他SO线程，并尝试了所有的东西。我正在使用jQuery 1.9.1和jQuery UI 1.10.2。

var url;

var renderItem = function(ul, item) {
    console.log('rendering item');
    return $("<li></li>")
        .data("ui-autocomplete-item", item) // tried replaceing with item.autocomplete
        .append("<a>" + item.label + "<br/>" + item.value + "</a>")
        .appendTo(ul);
};

var getSuggestions = function(request, response) {
    $.ajax({
        url: url,
        dataType: 'jsonp',
        data: {
            postcode: request.term,
            suggestionType: 'FULL',
            resultLimit: 50
        },
        success: function(data) {
            console.log('success :: data:');
            console.log(data);
            $.map(data.suggestions, function(obj, i) {
                console.log('success.map :: obj['+i+']:');
                console.log(obj);
                return {
                    label: obj.label,
                    value: obj.data.localityTag.postcode,
                    postcode: obj.data.localityTag.postcode,
                    suburb: obj.data.localityTag.locality,
                    state: obj.data.localityTag.state
                };
            });
        }
    });
};

$(function() {
    url = $('#raetDomain').val() + $('#raetContext').val() + 'getSuggestions';
    window.suggestionSelected = false;
    var autoc = {
        delay: 200,
        minLength: 4,
        source: getSuggestions,
        focus: function(e, ui) {
            e.preventDefault(); // without this: keyboard movements reset the input to ''
            $('#homeAddressFields .addressSuburb').val(ui.item.suburb);
            $('#homeAddressFields .addressPostcode').val(ui.item.postcode);
            $('#homeAddressFields .addressState').val(ui.item.state);
        },
        select: function(e, ui) {
            e.preventDefault();
            window.suggestionSelected = true;
            $('#homeAddressFields .addressSuburb').val(ui.item.suburb);
            $('#homeAddressFields .addressPostcode').val(ui.item.postcode);
            $('#homeAddressFields .addressState').val(ui.item.state);
        }
    };

    // This is only one of these fields at the moment but I am aiming for two postcode fields
    // and two suburb fields to all have autocomplete setup on them.
    $('#homeAddressFields .addressPostcode').each(function(i) {
         $(this).autocomplete(autoc).data('ui-autocomplete')._renderItem = renderItem;
         // tried .autocomplete('instance') instead of .data(...) but was undefined
    });
});

样本数据（无填充）：

{
    "suggestions":
    [{
        "data":
        {
            "localityTag":{"locality":"ACTON","postcode":"2601","state":"ACT"}
        },
        "label":"ACTON ACT 2601",
        "value":"ACTON ACT 2601"
    }],
    "suggestionType":"FULL"
}

Answer 1

在尝试各种变通办法组合后，我意识到回调没有运行。它现在正确呈现项目我已将$ .ajax成功函数更改为下面的代码。

success: function(data) {
    console.log('success :: data:');
    console.log(data);
    response($.map(data.suggestions, function(obj, i) {
        console.log('success.map :: obj['+i+']:');
        console.log(obj);
        return {
            label: obj.label,
            value: obj.data.localityTag.postcode,
            postcode: obj.data.localityTag.postcode,
            suburb: obj.data.localityTag.locality,
            state: obj.data.localityTag.state
        };
    }));
}

自动完成返回结果但不呈现菜单

1 个答案: