I have been trying to get search boxes on Studio site and have managed to get the code and change it to make one search box work. That is the text box. I have a search by jersey number box too. I don't know what to add to the existing code to make this work and I don't know where to place it into the code without disabling the whole thing. You may have guessed I am not a coder and you would be correct. My efforts have been ongoing nonetheless. 😁
The 1st image is what I would like to have in order for people to really narrow down a search and have more search options. However as you will see in the 2nd image, that is what I am currently working with considering my lack of knowledge. If I can at least get the number search to work then I will be quite happy for now.
Thank you in advance for any and all advice, assistance, and/or direction.
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();
}
});
}