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

EN

 <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>

[
  {
    "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..."

  }
  ]

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