使用 `keyup` 从我的 `.json' 文件中过滤/搜索已经显示在我的 html 上

Posted 2023-05-08

【中文标题】使用 `keyup` 从我的 `.json\' 文件中过滤/搜索已经显示在我的 html 上

【英文标题】：Using `keyup` to Filter/Search from my `.json' file already displaying on my html使用 `keyup` 从我的 `.json' 文件中过滤/搜索已经显示在我的 html 上

【发布时间】：2021-10-12 21:02:21

【问题描述】：

我已经为此工作了几天，但运气不佳。 我有一个包含几只动物的 json 文件 ReptilesTX.json，我想选择 搜索框。然后，过滤掉已经加载的动物，只保留与搜索匹配的动物。 关于我应该如何采用这种方法的任何指导？以下是我到目前为止尝试过的，但我遇到了一些我不知道如何阅读以进行故障排除的错误。提前感谢任何提示/帮助。

这是我的html

 <div id="container">
        <form role="form">
            <div class="form-group">
                <input type="input" class="form-control input-lg" id="txt-search" placeholder="Type your search character">
            </div>

          <p id="postAnimal">Posting goes here</p>
  

    </div>

我的 json 文件的简化示例

[
  
    "id": "americanalligator",
    "friendlyName": "American Alligator",
    "scientificName": "Alligator mississippiensis",
    "url": "https://tpwd.texas.gov/huntwild/wild/species/americanalligator/",
    "picturePath": "/assets/americanalligator",
    "description": "The American alligator is a large...",
    "lifeHistory": "An agile swimmer, the American alligator...",
    "habitat": "Alligators are found in or near water....",
    "distribution": "The American alligator is found ..."
  ,
  
    "id": "bullsnake",
    "friendlyName": "Bullsnake",
    "scientificName": "Pituophis catinefer sayi",
    "url": "https://tpwd.texas.gov/huntwild/wild/species/bullsnake/",
    "picturePath": "/assets/bullsnake",
    "description": "The bullsnake is a heavy-bodied snake...",
    "lifeHistory": "Bullsnakes vary in temperament... ",
    "habitat": "Bullsnakes prefer sandy soils in fields...",
    "distribution": "Bullsnakes occur in the western..."

  
  ]

我的 javascript

const xhr = new XMLHttpRequest();
const Reptiles = "ReptilesTX.json";

xhr.onload = function() 
if (this.readyState == 4 && this.status == 200) 
    var response = JSON.parse(this.responseText);

    let output = '';
    for(let i = 0; i < response.length; i++)

        output +=  `
    <ul id="list">
        <li id="name">$response[i].friendlyName</li><br>
        <li><img src='$response[i].picturePath.jpg'</li><br>
        <li><span>Scientific Name: </span>$response[i].scientificName</li>
        <li><span>Description: </span>$response[i].description</li><br>
        <li><span>Life History: </span>$response[i].lifeHistory</li><br>
        <li><span>Habitat: </span>$response[i].habitat</li><br>
        <li><span>Distribution: </span>$response[i].distribution</li>
        <li><span>Source: </span><a href="$response[i].url">Site</a></li>
    </ul>;
    `
    
    //console.log(output)
    document.getElementById("postAnimal").innerHTML = output;
     
;
xhr.open("GET", Reptiles, true);
xhr.send();



$('#txt-search').keyup(function()
    var searchField = $(this).val();
    if(searchField === '')  
        $('#filter-records').html('');
        return;
    
    
    var regex = new RegExp(searchField, "i");
    var output = '<div class="row">';
    var count = 1;
      $.each(Reptiles, function(key, val)
        if ((val.friendlyName.search(regex) != -1) || (val.scientificName.search(regex) != -1)) output = `
        <ul id="list">
            <li id="name">$response.friendlyName</li><br>
            <li><img src='$response.picturePath.jpg'</li><br>
            <li><span>Scientific Name: </span>$response.scientificName</li>
            <li><span>Description: </span>$response.description</li><br>
            <li><span>Life History: </span>$response.lifeHistory</li><br>
            <li><span>Habitat: </span>$response.habitat</li><br>
            <li><span>Distribution: </span>$response.distribution</li>
            <li><span>Source: </span><a href="$response.url">Site</a></li>
        </ul>;
        `
          if(count%2 == 0)
            output += '</div><div class="row">'
          
          count++;
        
      );
      output += '</div>';
      $('#filter-records').html(output);
);

【问题讨论】：

另一种方法是过滤页面上已有的 HTML。每次击键时，您都可以搜索<li>s 或ids 或名称或您想要的任何内容，并显示或隐藏匹配的元素。由于您可以访问创建页面的 HTML，因此您可以添加自定义属性以便于搜索。

【参考方案1】：

这是一个显示和隐藏 HTML 的基本搜索。现在它显示/隐藏列表项，但您可以将每个动物包装在一个带有 id 的 div 中并搜索它。

此外，这只会搜索整个单词，但您可以对其进行调整以搜索每个字母并随着搜索变得更加具体而隐藏越来越多的动物。

function doFilter() 

  var searchInput = document.getElementById("searchInput").value;

  $("li").filter("li[data-" + searchInput + "]")
    .css("display", "block");

  $("li").not("li[data-" + searchInput + "]")
    .css("display", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Enter one of the animals on the list, without 'data-'.<br />
The whole word must be entered.<br /><br />

<input id="searchInput" type="text" onkeyup="doFilter()" />

<ul>
  <li data-aardvark>aardvarks eat ants...</li>
  <li data-kangaroo>what's that kangaroo doing here?</li>
  <li data-lizard>lizards are cold...</li>
  <li data-alligator>gators play football...</li>
</ul>

【参考方案2】：

在一些帮助下我能够让它工作。

const xhr = new XMLHttpRequest();
const Reptiles = "ReptilesTX.json";

var dataFromServer = [];

xhr.onload = function() 
if (this.readyState == 4 && this.status == 200) 
    var response = JSON.parse(this.responseText);
    dataFromServer = response;
    let output = '';
    for(let i = 0; i < response.length; i++)

        output +=  `
    <ul id="list">
        <li id="name">$response[i].friendlyName</li><br>
        <li><img src='$response[i].picturePath.jpg'</li><br>
        <li><span>Scientific Name: </span>$response[i].scientificName</li>
        <li><span>Description: </span>$response[i].description</li><br>
        <li><span>Life History: </span>$response[i].lifeHistory</li><br>
        <li><span>Habitat: </span>$response[i].habitat</li><br>
        <li><span>Distribution: </span>$response[i].distribution</li>
        <li><span>Source: </span><a href="$response[i].url">Site</a></li>
    </ul>;
    `
    
    //console.log(output)
    document.getElementById("postAnimal").innerHTML = output;
     
;
xhr.open("GET", Reptiles, true);
xhr.send();



$('#txt-search').keyup(function()
    var searchField = $(this).val();
    if(searchField === '')  
        $('#filter-records').html('');
        return;
    
    
    var regex = new RegExp(searchField, "i");
    var output = '<div class="row">';
    var count = 1;
    console.log(dataFromServer)
      $.each(dataFromServer, function(key, val)
          console.log(key, val)
        if ((val.friendlyName.search(regex) != -1) || (val.scientificName.search(regex) != -1)) output = `
        <ul id="list">
            <li id="name">$val.friendlyName</li><br>
            <li><img src='$val.picturePath.jpg'</li><br>
            <li><span>Scientific Name: </span>$val.scientificName</li>
            <li><span>Description: </span>$val.description</li><br>
            <li><span>Life History: </span>$val.lifeHistory</li><br>
            <li><span>Habitat: </span>$val.habitat</li><br>
            <li><span>Distribution: </span>$val.distribution</li>
            <li><span>Source: </span><a href="$val.url">Site</a></li>
        </ul>;
        `
          if(count%2 == 0)
            output += '</div><div class="row">'
          
          count++;
        
      );
      output += '</div>';
      $('#postAnimal').html(output);
);