jQuery、JSON、搜索等

Question

我在一个 JSON 文件中有大量值，其中包含场地名称及其联系信息以及描述。我想生成一个表格，列出我页面上 JSON 文件的内容。我希望创建一个实时搜索功能，删除与 eachkeyUpdetected 不再相关的每个条目。

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 中的场所.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 的占位符/容器 div：

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