So I am currently building an overview page with a lot of cards which include data such as route name, number of routes, strarting point and date. Now im trying to build a filter using javascript where the user can filter on the route name, number of routes, strarting point and date so that the user can search for the specific card.
Currently I have 6 cards with data and when I type in the search input field it just deletes the first 4 cards and shows the last 2.
- I used some unnecessary classnames like route__text, these were just for the purpose of trying to fix my search filter.
My code:
Help would be greatly appreciated
const input = document.getElementById('search');
input.addEventListener('keyup', search);
function search() {
const inputValue = input.value;
console.log(inputValue.toLowerCase());
const routeContainer = document.getElementById('route');
const routeDetail = routeContainer.getElementsByClassName('route__filter');
console.log(routeDetail);
for(let i = 0; i < routeDetail.length; i ) {
let searchTerm = routeDetail[i].querySelectorAll(".route__parent td.route__text");
// console.log(typeof searchTerm);
for(let i = 0; i < searchTerm.length; i ) {
let correctSearch = searchTerm[i];
console.log(correctSearch.innerHTML.toLocaleLowerCase());
if (correctSearch.innerHTML.toLowerCase().includes(inputValue.toLowerCase())) {
routeDetail[i].style.display = "";
} else {
routeDetail[i].style.display = "none";
}
}
}
}
search();<div class="route" id="route">
<div class="row">
<div class="col-12 d-flex justify-content-end mb-4">
<input type="search" id="search" name="gsearch" placeholder="Search">
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route one</td>
<td class="route__text">3</td>
<td class="route__text">City one</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route two</td>
<td class="route__text">3</td>
<td class="route__text">City two</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route three</td>
<td class="route__text">3</td>
<td class="route__text">City three</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route four</td>
<td class="route__text">3</td>
<td class="route__text">City four</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route five</td>
<td class="route__text">5</td>
<td class="route__text">City five</td>
<td class="route__text">21-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route six</td>
<td class="route__text">3</td>
<td class="route__text">City six</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
</div>
</div>CodePudding user response：
The code below works... Your code was very confusing to edit and point mistakes, but in general you should pay attention to a couple of things:
- Note the difference between HTML Collections, Arrays and NodeLists
- Avoid nesting for loops as they're confusing and hard to understand. In case you really need to use it, do not use the same variable name (
iin your case) as it makes it confusing for the interpreter and other programmers. keyupevent trigger unnecessarysearchcalls when no typing was made (i.e. shift or caps press)
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('search');
input.addEventListener('input', search);
})
const search = (e) => {
const inputValue = e.target.value;
// console.log(`inputValue: ${inputValue.toLowerCase()}`);
const routeContainer = document.getElementById('route');
const routeDetail = [...routeContainer.getElementsByClassName('route__filter')];
// console.log(routeDetail);
for(let i = 0; i < routeDetail.length; i ) {
let searchTerm = [...routeDetail[i].querySelectorAll(".route__parent td.route__text")];
searchTerm = [...searchTerm.map((item) => item.innerHTML)];
if (searchTerm.map(text => text.includes(inputValue)).some(val => val == true)){
routeDetail[i].style.display = 'block'
} else {
routeDetail[i].style.display = 'none'
}
}
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./test.js"></script>
<title>Document</title>
</head>
<body>
<div class="route" id="route">
<div class="row">
<div class="col-12 d-flex justify-content-end mb-4">
<input type="search" id="search" name="gsearch" placeholder="Search">
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route one</td>
<td class="route__text">3</td>
<td class="route__text">City one</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route two</td>
<td class="route__text">3</td>
<td class="route__text">City two</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route three</td>
<td class="route__text">3</td>
<td class="route__text">City three</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route four</td>
<td class="route__text">3</td>
<td class="route__text">City four</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route five</td>
<td class="route__text">5</td>
<td class="route__text">City five</td>
<td class="route__text">21-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
<div class="col-lg-6 route__filter">
<div class="route__details">
<table class="route__table">
<tr>
<th>Route name</th>
<th>Stops</th>
<th>Starting point</th>
<th>Date</th>
</tr>
<tr class="route__parent">
<td class="route__text">Route six</td>
<td class="route__text">3</td>
<td class="route__text">City six</td>
<td class="route__text">20-09-2021</td>
</tr>
</table>
<img src="{% static 'admin/img/svg/route-map.svg' %}" alt="map route" class="svg">
</div>
</div>
</div>
</div>
</body>
</html>