代码之家 › 专栏 › 技术社区 › Benji

jQuery、JSON、搜索等

search json arrays jquery

Benji · 技术社区 · 14 年前

我有大量的价值观 JSON文件 包含场馆名称及其联系信息以及说明的文件。我想生成一个表,列出页面上JSON文件的内容。我希望创建一个实时搜索功能,删除每个条目不再相关的每一个 keyUp 检测。

[
    {
        "name": "Aquarium Caf&eacute; Bar",
        "site": "http://www.aquariumcafebar.ca",
        "address": "2923 Masson 728-6116",
        "genre": "default"
    },â
    {
        "name": "Ar&eacute;na Pierre &#8220;Pete&#8221; 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>

我对如何从场馆.json在jQuery中,但是一旦我有了它,我真的不知道该怎么处理它。append()包含所有信息的。我只是想在这里找一些语法方面的帮助!

哦,如果您碰巧对如何在用户搜索时更新表有什么好主意,我们将不胜感激!

爱,

本吉比

2 回复 | 直到 14 年前

Dave Ward 14 年前

你可以用 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>

Container

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

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

然后使用 the quickSearch plugin 之后渲染,当然)像这样:

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

user113716 14 年前

如果你不想使用插件,这是一个非常简单的任务。这是假设 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);
}

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