I've filled up cards on my website via a json file, which is also working.
Now I would like to search through these cards via a searchbar, but this doesn't work. I still get to see all the cards.
What am I doing wrong?
Html code
<input id="searchbar" type="text" name="search" placeholder="Search...">
<div class="row" id="divResult"></div>
Script
<script>
const divRes = document.querySelector('#divResult');
myRequest = () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/elements.json', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status != 200) {
divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
} else {
const arrResponse = JSON.parse(xhr.responseText);
divRes.innerHTML = createHTMLCard(arrResponse);
}
}
};
xhr.onerror = function() {
divRes.innerHTML = "Request failed";
};
}
createHTMLCard = (arrObj) => {
let res = '';
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
console.log(input);
for (let i = 0; i < arrObj.length; i++) {
let obj = arrObj[i];
if (obj.name.toLowerCase() === input) {
res +=
`<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card m-2">
<div class="card-body">
<h5 class="card-title">${obj.name}</h5>
<p><strong>Prijs:</strong> ${obj.price}</p>
<button id="moreInfo" class="btn btn-primary">More info</button>
</div>
</div>
</div>`;
}
}
return res;
}
document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard);
window.addEventListener('load', myRequest);
</script>
The code is updated so I am changing my previous answer. Use the below code to fix the issue.
<script>
const divRes = document.querySelector('#divResult');
let arrResponse = [];
myRequest = () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/elements.json', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status != 200) {
divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
} else {
arrResponse = JSON.parse(xhr.responseText);
createHTMLCard(arrResponse);
}
}
};
xhr.onerror = function() {
divRes.innerHTML = "Request failed";
};
}
createHTMLCard = () => {
let res = '';
let input = this.value
input = input.toLowerCase();
console.log(input);
for (let i = 0; i < arrResponse.length; i++) {
let obj = arrResponse[i];
if (obj.name.toLowerCase() === input) {
res +=
`<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card m-2">
<div class="card-body">
<h5 class="card-title">${obj.name}</h5>
<p><strong>Prijs:</strong> ${obj.price}</p>
<button id="moreInfo" class="btn btn-primary">More info</button>
</div>
</div>
</div>`;
}
}
divRes.innerHTML = res;
}
document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard);
window.addEventListener('load', myRequest);
</script>
Regards, omi