Skip to content
Snippets Groups Projects
Commit 9ca7f458 authored by Nigel  Sahl's avatar Nigel Sahl
Browse files

feat: debounce for search button

parent 60887ff1
Branches
Tags
No related merge requests found
......@@ -13,8 +13,6 @@ require_once PROJECT_ROOT_PATH . '/middleware/AuthMiddleware.php';
AuthMiddleware::getInstance()->secureRoute();
$searching = [
// 'name' => $_GET["name"] ?? null,
// 'description' => $_GET["description"] ?? null
];
$itemInPage = 6;
......@@ -24,19 +22,6 @@ $selectedCity = $_GET["city"] ?? null;
$selectedPriceRange = $_GET["price-range"] ?? null;
$selectedSorting = $_GET["sorting"] ?? null;
// $gymsFiltered = GymService::getInstance()->getFiltered(
// [
// 'page' => $currentPage,
// 'cityId' => $selectedCity,
// 'sorting' => $selectedSorting,
// 'priceRange' => $selectedPriceRange,
// 'sortingOption' => $sortingOption,
// 'priceRangeOption' => $priceRangeOption,
// 'gymCountInPage' => $itemInPage,
// 'searching' => $searching
// ]
// );
?>
<!DOCTYPE html>
......@@ -77,7 +62,7 @@ $selectedSorting = $_GET["sorting"] ?? null;
?>
<form class="form-search">
<input id="input-search" class="input-search" type="text" name="gym_name" placeholder="Search Gym">
<button class="button-search" id="button-search">
<button type="button" class="button-search" id="button-search" onclick="buttonSearch(event)">
<img src="/public/icon/vector_search.svg" alt="Search Icon">
</button>
</form>
......
......@@ -2,6 +2,30 @@ if (gym_name != null && gym_name != "") {
callSearchGym(gym_name);
}
function debounce(func, delay) {
let dTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(dTimer);
dTimer = setTimeout(() => func.apply(context, args), delay);
}
}
function searchPage(){
let queryParam = new URLSearchParams(window.location.search);
queryParam.set("gym_name", document.getElementById("input-search").value);
window.location.search = queryParam.toString();
}
const debounceSearch = debounce(searchPage, 500);
function buttonSearch(event) {
event.preventDefault();
debounceSearch();
}
function callSearchGym(gym_name) {
// alert(JSON.stringify(gyms));
// searchGym(gyms, document.getElementById("input-search").value);
......@@ -31,7 +55,10 @@ function searchGym(allGyms, searchString) {
let gymCardContainer = document.getElementById("gym-card-container");
gymCardContainer.innerHTML = "";
if(searchedGyms.length == 0) {
gymCardContainer.innerHTML = "No gyms found";
gymCardContainer.innerHTML = `
<div class="space"></div>
No gyms found
`;
} else {
// Slice the array to display
let startIndex = (page - 1) * itemInPage;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment