jQuery，JSON，搜索等

Question

我在JSON文件中包含了大量的值，其中包含場地名稱和他們的聯繫信息以及描述。我想生成一個表格，其中列出了我的頁面上的JSON文件的內容。我希望創建一個實時搜索功能，刪除與檢測到的每個keyUp不再相關的每個條目。

的JSON

[ 
    { 
     "name": "Aquarium Café Bar", 
     "site": "http://www.aquariumcafebar.ca", 
     "address": "2923 Masson 728-6116", 
     "genre": "default" 
    },‎ 
    { 
     "name": "Aréna Pierre “Pete” Morin", 
     "site": "none", 
     "address": "1925 St-Antoine 634-3471", 
     "genre": "default", 
    } 
] 

提出的HTML

<table> 
    <thead> 
     <tr> 
      <th>Venue</th> 
      <th>Address</th> 
      <th>Website</th> 
      <th>Genre</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Aquarium Caf&eacute; Bar</td> 
      <td>2923 Masson 728-6116</td> 
      <td>http://www.aquariumcafebar.ca</td> 
      <td>Rock</td> 
     </tr> 
    </tbody> 
</table> 

我得如何從jQuery中的venues.json文件搶JSON一個模糊的想法，但一旦我將它包含到.append（）中包含所有信息，我真的不知道該如何處理它。我只是在這裏尋找一些有關語法的幫助！

噢，如果您碰巧有任何關於如何在用戶搜索時更新表格的明智想法，它將不勝感激！

愛，

BenjiBee

Answer 1

你可以使用jQuery.tmpl從JSON數據創建一個表，使用這樣的一個模板：

<script type="text/html" id="VenueTemplate"> 
    <table id="VenueResults"> 
    <thead> 
     <tr> 
     <th>Venue</th> 
     <th>Address</th> 
     <th>Website</th> 
     <th>Genre</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>${name}</td> 
     <td>${address}</td> 
     <td>${site}</td> 
     <td>${genre}</td> 
     </tr> 
    </tbody> 
    </table> 
</script> 

這jQuery來呈現模板，並注入它變成一個名爲Container的佔位符/容器格：

var yourJSONData; // Assuming you've loaded this from wherever. 

$('#VenueTemplate').tmpl(yourJSONData) 
        .appendTo('#Container'); 

然後使用the quickSearch plugin以交互方式過濾該數據。它可以被應用到表（後渲染，當然）是這樣的：

$('#SearchInputField').quicksearch('#VenueResults tbody tr'); 

Answer 2

這是一個非常簡單的任務，如果你不想使用插件。這假定jQuery 1.4或更高版本。

試試看：http://jsfiddle.net/ZBKSg/

jQuery的

var $tbody = $('table > tbody'); 

    // Assumes the data is assigned to a variable "data" 
for(var i = 0, len = data.length; i < len; i++) { 
    var $tr = $('<tr />'); 
    $('<td/>',{text:data[i].name}).appendTo($tr); 
    $('<td/>',{text:data[i].site}).appendTo($tr); 
    $('<td/>',{text:data[i].address}).appendTo($tr); 
    $('<td/>',{text:data[i].genre}).appendTo($tr); 
    $tr.appendTo($tbody); 
} 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Venue</th> 
      <th>Address</th> 
      <th>Website</th> 
      <th>Genre</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>​ 

你也許可以加快它有點像這樣：

試試吧出：http://jsfiddle.net/ZBKSg/1/

var $tbody = $('table > tbody'); 
var row = '<tr><td></td><td></td><td></td><td></td></tr>' 

for(var i = 0, len = data.length; i < len; i++) { 
    var $tr = $(row); 
    $tr.children(':first').text(data[i].name) 
       .next().text(data[i].site) 
       .next().text(data[i].address) 
       .next().text(data[i].genre); 
    $tr.appendTo($tbody); 
}