jquery自動完成成功JSON映射

我有問題與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); 

};

我真的停留在那裏，有人可以幫忙嗎？

由於在數據

來源

2014-10-20 Lelly

是否有類別和查詢具有一對一的關係，一對一的關係？ – Terry 2014-10-20 21:21:10

每個項目的數量總是不同的。每個例子可以有2個類別和15個查詢。 – Lelly 2014-10-20 21:24:36

對象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.categories和data.queries對象進行交互：http://jsfiddle.net/teddyrised/15259aca/

來源

2014-10-20 21:26:24 Terry

我很確定我必須使用_renderItem函數來修改自動完成插件下拉菜單。這意味着我必須在成功功能中映射出我需要的所有信息。 – Lelly 2014-10-20 21:37:09

jquery自動完成成功JSON映射

回答

相關問題