I have been working on this for several days now and I'm not having much luck.
I have a json file ReptilesTX.json
with several animals and I would like to have the option
search box . Then, have the already loaded animals filtered out to only keep the ones matching the search.
Any guidance on how should I take this approach? Below is what I tried so far but I'm getting some errors I don't know how to read to troubleshoot. Thanks in advance for any tips/help.
Here is my 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>
Reduced example of my json file
[
{
"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..."
}
]
My 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);
});
<li>
s orid
s or names or whatever you want and show or hide the elements that match. Since you have access to the HTML that creates the page, you can add custom attributes that make it easy to search.