javascript - jquery 自动完成成功 JSON 映射

Question

我对 jquery UI 自动完成插件有疑问。我不知道如何映射我从服务器返回的响应。

这是 JSON 结构:

{
    categories: [
       {
          slug: "car-index",
          name: "Car",
          rank: "5"
       },
       {
          slug: "anim-index",
          name: "Animals",
          rank: "29"
       },
    ],
    queries: [
        "term1",
        "term2"
    ]
}

我的自动完成代码:

$.ajax({
        url: autocompleteUrl,
        dataType: 'json',
        data: {
                q: request.term
        },
        success: function(data) {
            response(
                $j.map( data, function(item) {
                    return {
                        name: item.categories.name,
                        slug: item.categories.slug,
                        rank: item.categories.rank,
                        query: item.queries
                    }
                 })
            );

此代码出现错误。如果我在 data.categories 上进行映射，我就可以让它工作，但我还需要来自“查询”的信息，我不知道如何从这两个地方返回结果。需要获取所有信息(查询、名称、slug、排名)才能在我的渲染函数中显示文本。

    }).data('uiAutocomplete')._renderItem = function (ul, item) {
    return $('<li></li>')
    .append('<a><span>' + item.name + '</span> - <span>Rank: ' + item.rank + '</span></a>')
    .data('ui-autocomplete-item', item)
    .appendTo(ul);

};

我真的被困在那里，有人可以帮忙吗？

谢谢

Answer 1

可以使用 name.value 表示法访问以 JSON 格式返回的数据中的对象。例如，要访问属性categories(它将返回一个数组)，我们可以简单地调用data.categories。要循环返回数组中的项目，我们可以使用 $.each() .

另外，我建议您不要依赖 jqXHR.success，而是应该链接一个延迟对象并使用 .done() AJAX 调用之后:)

$.ajax({
    url: autocompleteUrl,
    dataType: 'json',
    data: {
            q: request.term
    }
}).done(function(data) {
    // Success function
    // Example of iterating through all elements in the array returned by data.categories
    $.each(data.categories, function() {
        $('<li />')
        .html('<a><span>' + this.name + '</span> - <span>Rank: ' + this.rank + '</span></a>')
        .data('ui-autocomplete-item', item)
        .appendTo('ul');
    });
});

您对返回的数据实际想要做什么以及如何将它们插入到 DOM 中有点模糊，但我已经做了一个概念验证 fiddle 来向您展示如何通过 data.categories 和 data.queries 对象:http://jsfiddle.net/teddyrised/15259aca/