jQuery用戶界面自動完成 - 在JSON

我試圖使用jQuery UI的自動完成構件具有自定義JSON供稿我是從一個API，它被格式化爲取回訪問嵌套對象如下：jQuery用戶界面自動完成 - 在JSON

{ 

    "SearchTerm": "ches", 
    "HasDirectCountyHit": false, 
    "DirectCountyHitId": null, 
    "HasDirectLocationHit": false, 
    "DirectLocationHitId": null, 
    "Developments": [ 
     { 
      "Id": "45339ae3e55a", 
      "Label": "Chestnut Walk, Bilston", 
      "Url": "/developments/chestnut-walk-bilston" 
     }, 
     { 
      "Id": "4835f52e053a", 
      "Label": "Crown Park, Chester", 
      "Url": "/developments/crown-park-chester" 
     }, 
     { 
      "Id": "757964964cc6", 
      "Label": "The Birches, West Timperley", 
      "Url": "/developments/the-birches-west-timperley" 
     } 
    ], 
    "Counties": [ 
     { 
      "Id": "7", 
      "Label": "Cheshire", 
      "Url": "/search?cid=7" 
     }, 
     { 
      "Id": "24", 
      "Label": "Greater Manchester", 
      "Url": "/search?cid=24" 
     } 
    ], 
    "Locations": [ 
     { 
      "Id": "12061", 
      "Label": "Cheselbourne, Dorset (DT2 7)", 
      "Url": "/search?lid=12061" 
     }, 
     { 
      "Id": "12062", 
      "Label": "Chesham, Buckinghamshire (HP5 1)", 
      "Url": "/search?lid=12062" 
     }, 
     { 
      "Id": "12063", 
      "Label": "Chesham, Greater Manchester (BL9 6)", 
      "Url": "/search?lid=12063" 
     }, 
     { 
      "Id": "12064", 
      "Label": "Chesham Bois, Buckinghamshire (HP6 5)", 
      "Url": "/search?lid=12064" 
     }, 
     { 
      "Id": "12065", 
      "Label": "Cheshunt, Hertfordshire (EN8 9)", 
      "Url": "/search?lid=12065" 
     }, 
     { 
      "Id": "12066", 
      "Label": "Chesley, Kent (ME9 7)", 
      "Url": "/search?lid=12066" 
     }, 
     { 
      "Id": "12067", 
      "Label": "Cheslyn Hay, Staffordshire (WS6 7)", 
      "Url": "/search?lid=12067" 
     }, 
     { 
      "Id": "12068", 
      "Label": "Chessetts Wood, Warwickshire (B94 6)", 
      "Url": "/search?lid=12068" 
     }, 
     { 
      "Id": "12069", 
      "Label": "Chessington, Kingston upon Thames - Greater London (KT9 2)", 
      "Url": "/search?lid=12069" 
     }, 
     { 
      "Id": "12070", 
      "Label": "Chessmount, Buckinghamshire (HP5 1)", 
      "Url": "/search?lid=12070" 
     } 
    ] 

}

我調用的API返回基於搜索詞的結果，所以我知道嵌套對象中的所有結果都是匹配的 - 我的問題是如何訪問這些對象（'Developments'，'Counties'和'Locations'）以便自動填充小部件可以選取'標籤'值？

感謝，羅賓

來源

2014-10-09 ParkerDigital

我想你可以遍歷屬性（開發，縣和位置）或使用$ .merge將所有記錄合併到一個將使用所有標籤，id和url值創建一個全新數組，然後將其作爲源分配給自動完成的記錄。 – 2014-10-09 13:17:08

你的問題到目前爲止你已經嘗試過嗎？ – 2014-10-09 13:17:14

確定 - 這裏是你可以做什麼：

//put all the keys you want to pull out of your json in an array 
var props = [ 
    "Locations", "Counties", "Developments" 
]; 
//empty array for your autocomplete 
var labels = []; 

//loop thru all the properties you care about 
$.each(props, function() { 
    $.each(source[this], function() { 
     //and pull out all the labels and add them to the labels array 
     labels.push(this.Label) 
    }); 
}); 


$("#autocomplete").autocomplete({ 
    source: labels 
});

，並看到它的行動我創建了一個快速撥弄所有 http://jsfiddle.net/fr5yb3n0/

來源

2014-10-09 14:08:00

完美的作品，非常感謝:-) – ParkerDigital 2014-10-09 14:50:51

jQuery用戶界面自動完成 - 在JSON

回答

相關問題