Currently, I am attempting to filter search results using multiple filter options. After trying various methods, I have found that when applying only 2 filters, the search works as expected. However, when adding 3 or more filters, it includes additional results that do not meet all of the criteria.
The goal is for the search results to become narrower as more filters are applied.
For a visual demonstration, you can refer to this GIF: https://i.sstatic.net/I6Hhx.jpg
Below is the code I am currently using. It appears quite bloated and complex, especially if more filter options need to be added. If there is a simpler way to achieve this using compounding filters, please share your insights. Thank you!
I am utilizing VUE 3 with the composition API.
const months = computed(() => {
return documents.value.filter((plants) =>
plants.months.includes(month.value)
);
});
const plantType = computed(() => {
return documents.value.filter(
(plants) => plants.plantType == plantT.value
);
});
const Zone = computed(() => {
return documents.value.filter((plants) =>
plants.Zone.includes(getZone.value)
);
});
const toxicPets = computed(() => {
return documents.value.filter((plants) =>
plants.toxicPets.includes(toxic.value)
);
});
const Combined = computed(() => {
gettingThree = false;
return documents.value.filter(
(plants) =>
plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value) &&
plants.plantType == plantT.value &&
plants.toxicPets.includes(toxic.value)
);
});
const Combined2 = computed(() => {
gettingTwo = true;
gettingThree = false;
return documents.value.filter(
(plants) =>
(plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value)) ||
(plants.Zone.includes(getZone.value) &&
plants.plantType == plantT.value) ||
(plants.Zone.includes(getZone.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.months.includes(month.value))
);
});
const Combined3 = computed(() => {
gettingTwo = false;
gettingThree = true;
return documents.value.filter(
(plants) =>
(plants.Zone.includes(getZone.value) &&
plants.plantType == plantT.value &&
plants.months.includes(month.value)) ||
(plants.Zone.includes(getZone.value) &&
plants.toxicPets.includes(toxic.value) &&
plants.plantType == plantT.value) ||
(plants.Zone.includes(getZone.value) &&
plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value)) ||
(plants.plantType == plantT.value &&
plants.months.includes(month.value) &&
plants.toxicPets.includes(toxic.value))
);
});
const searchMatch = computed(() => {
if (Combined.value.length > 0) {
console.log("getting 4");
return Combined.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (Combined3.value.length > 0 && gettingTwo == false) {
console.log("getting 3");
return Combined3.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (Combined2.value.length > 0 && gettingThree == false) {
console.log("getting 2");
return Combined2.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
month.value !== null &&
getZone.value == null &&
toxic.value == null &&
plantT.value == null
) {
return months.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
getZone.value !== null &&
plantT.value == null &&
month.value == null &&
toxic.value == null
) {
return Zone.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
plantT.value !== null &&
month.value == null &&
getZone.value == null &&
toxic.value == null
) {
return plantType.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
if (
toxic.value !== null &&
plantT.value == null &&
month.value == null &&
getZone.value == null
) {
return toxicPets.value.filter(
(plant) =>
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
}
return documents.value.filter((plant) => {
return (
plant.plantName.toLowerCase().indexOf(search.value.toLowerCase()) !=
-1
);
});
});