2014-10-20 122 views
1

我有问题与jQuery UI自动完成插件。我不知道如何映射即时消息从服务器返回的响应。jquery自动完成成功JSON映射

这里的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上执行地图,但我还需要“查询”中的信息我不知道如何从两个地方返回结果。需要获取所有信息(查询,名称,slu,,等级)以便在我的渲染功能中显示文本。

}).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); 

}; 

我真的停留在那里,有人可以帮忙吗?

由于在数据

+0

是否有类别和查询具有一对一的关系,一对一的关系? – Terry 2014-10-20 21:21:10

+0

每个项目的数量总是不同的。每个例子可以有2个类别和15个查询。 – Lelly 2014-10-20 21:24:36

回答

0

对象JSON格式返回可以使用name.value符号来访问。例如,要访问将返回数组的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中,但是我已经做了一个概念验证小提示,以向您展示如何通过data.categoriesdata.queries对象进行交互:http://jsfiddle.net/teddyrised/15259aca/

+0

我很确定我必须使用_renderItem函数来修改自动完成插件下拉菜单。这意味着我必须在成功功能中映射出我需要的所有信息。 – Lelly 2014-10-20 21:37:09