javascript - 搜索 JSON 文件中的数据

Question

我创建了脚本来从外部 JSON 文件获取数据并附加到 #test 元素:

$(document).ready(function(){
    $.getJSON('/path_to_json_file',function(json){
      $.each(json, function(i,data){
        $("#test").append('<li class="col-xs-4 col-md-3 ' + data.status + '" data-id="' + data.id + '"><div class="area view"><div class="game-label ' + data.title + '"><div class="news">News</div></div><div class="image ' + data.url_title + '"></div><div class="mask"><a href="" class="btn">BTN1</a><a href="" class="btn">BTN2</a><a href="#' + data.url_title + '" class="btn ' + data.info_visible + '"><span class="glyphicon glyphicon-info-sign"></span></a><a class="btn btn-star for-members"><span class="glyphicon"></span></a></div></div><div class="game-name sr-only"><a href="#">' + data.title + '</a></div></li>');
      });

    });

  });

一切都运转良好。但我也想提供一个选项来搜索 JSON 数据并在页面上显示结果。在输入中键入条目名称 (jsondata6) 时，所有与搜索语句不匹配的条目都应该消失，以便用户只能看到正确的项目。

搜索输入

<input type="search" name="search" id="search" value="" />

JSON 文件

{"jsondata1":"jsondata1",
"jsondata2":"jsondata2",
"jsondata3":"jsondata3",
"jsondata4":"jsondata4",
"jsondata5":"jsondata5",
"jsondata6":"jsondata6"
}

来自 JSON 的标记

<ul id="test">
  <li class="col-xs-4 col-md-3 jsondata1" data-id="jsondata2">

    <div class="area view">
      <div class="game-label jsondata3">
      <div class="news">News</div>
    </div>
    <div class="image jsondata4"></div>
    <div class="mask">
        <a href="" class="btn btn-play js-run-game"></a>
        <a href="" class="btn btn-demo js-run-demo"></a>
        <a href="#" class="btn btn-info jsondata5"><span class="glyphicon glyphicon-info-sign"></span></a>
        <a class="btn btn-star"><span class="glyphicon"></span></a>
    </div>
</div>
<div class="game-name sr-only"><a href="#">jsondata6</a></div>

我正在尝试修改上面的脚本，但到目前为止还没有成功。有什么帮助吗？

谢谢!

Answer 1

我可能会将获取的 json 数据推送到数组中，例如

var some_global_array=[]
$.each(json, function(i,data){
    some_global_array.push(data);
}

然后从填充的数组中创建元素。那么执行搜索就会容易得多。容器li那么就会有data-my-array-id (或者一个类，你更喜欢哪个)整数属性

每个搜索都会迭代 some_global_array (例如 for(var i=0;i<some_global_array.length;i++){... 并找到数据搜索逻辑应该隐藏/显示哪些索引。然后，如果您发现应该显示索引，只需隐藏不符合搜索条件的元素的 data-my-array-id 元素/显示所有其他的