Hello all,
I am not a coder but have attempted to learn some so that I can get custom search boxes into the site. We have a members area with dynamic pages and I will be adding a custom login. At current I have managed to add the code below to the site and it seems to enable text searching in one of the search bars. However I have a second search box that will be to search for a member by jersey number.
My question is this: what is the code I need to add to enable a search for number and where specifically do I add it? I’m assuming I can add it within the code below. ??
Thank you in advance for any help you can provide. I appreciate it.
import wixData from ‘wix-data’;
$w.onReady(() => {
// Real-time search as the user types in the search bar.
$w(“#searchBar”).onInput(() => {
performSearch();
});
});
function performSearch() {
const searchQuery = $w(“#searchBar”).value.trim();
if (searchQuery.length > 0) {
// Apply the filter based on the search query
$w(“#dataset1”).setFilter(
wixData.filter()
.contains(“title”, searchQuery)
.or(wixData.filter().contains(“fullName”, searchQuery))
.or(wixData.filter().contains(“state”, searchQuery))
.or(wixData.filter().contains(“teamName”, searchQuery))
)
.then(() => {
console.log(“Dataset filtered”);
// Automatically expand the repeater if there are items to display
updateRepeaterVisibility();
})
.catch((err) => {
console.error(“Failed to filter dataset:”, err);
$w(“#repeaterSearch”).collapse();
// Show the notFound element if there’s an error
$w(“#notFound”).show();
});
} else {
// Clear the filter and collapse the repeater if search query is empty
$w(“#dataset1”).setFilter(wixData.filter())
.then(() => {
console.log(“Filter cleared”);
$w(“#repeaterSearch”).collapse();
// Hide the notFound element when the filter is cleared
$w(“#notFound”).hide();
})
.catch((err) => {
console.error(“Failed to clear filter:”, err);
$w(“#repeaterSearch”).collapse();
// Optionally, hide the notFound element if there’s an error
$w(“#notFound”).hide();
});
}
}
function updateRepeaterVisibility() {
// Check if the dataset has items to display after filtering
$w(“#dataset1”).getItems(0, 1).then((results) => {
if (results.totalCount > 0) {
$w(“#repeaterSearch”).expand();
// Hide the notFound element when there are items to display
$w(“#notFound”).hide();
} else {
$w(“#repeaterSearch”).collapse();
// Show the notFound element when there are no items to display
$w(“#notFound”).show();
}
});
}
