Lately, I've been developing a new website geared towards serving as a platform for various travel agencies to showcase their tour packages.
The homepage features a functional filter section that enables users to search for offers based on different criteria.
<div id="offer-filters">
<h2>Filter Search</h2>
<div id="filter-bars">
<ul id="filter-list">
<li>
<label for="searchagency">Agency</label>
<input list="agencies" id="searchagency" name="searchagency"
onclick="dataListFromOriginAgency('agencies', 'searchagency')">
</li>
<datalist id="agencies"></datalist>
... (additional filter options) ...
The primary concept here is that the button at the bottom triggers functions based on the number of filled inputs. For instance, if a user searches by agency and destination, corresponding functions are called accordingly.
However, there's an issue where only one function gets invoked as conditions evaluate sequentially. Is there a way to assign unique functions to every combination of filters?
Furthermore, these functions make AJAX requests to fetch data dynamically, enhancing the user experience with real-time content updates.
function triggerFuncByScenario() {
if (!(document.querySelector("#searchagency").value === "")) {
getOffersByName();
}
else if (!(document.querySelector("#searchagency").value === "" && document.querySelector("#searchdestination").value === "")) {
getOffersByDestinationName();
}