I have a Wix Site Page: Profile Search results page. I am currently coding and using Connected Datasets for filtering within a Container Box that has a repeater for all profiles in the collection. There could potentially be thousands of these profiles in the collection at some point in time and want to make sure the filtering of search results in the repeater is quick and smooth. Currently I can filter by typing in a State (#input1), or city (#input2). There is also two dropdowns. One to filter by Area of specialization (#dropdown1), or Sport Specialization (#dropdown2). The ‘#input1’, and ‘#input2’ are both filtered through code, and the ‘#dropdown1’ and '#dropdown2 are currently filtered through connected Dataset. Here is the current page code:
import wixData from ‘wix-data’;
$w.onReady(function () {
$w("#dataset1").onReady(() => {
$w('#input2').onChange(() => {
$w('#dataset1').setFilter(wixData.filter().contains("city", $w('#input2').value)
)
})
$w("#input1").onChange(() => {
$w('#dataset1').setFilter(wixData.filter().contains("state", $w("#input1").value)
)
})
})
});
/**
- Adds an event handler that runs when an input element’s value
is changed.
Read more - @param {$w.Event} event
*/
export function input1_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
}
/**
- Adds an event handler that runs when an input element’s value
is changed.
Read more - @param {$w.Event} event
*/
export function input2_change(event) {
// This function was added from the Properties & Events panel. To learn more, visit Working with the Properties & Events Panel
// Add your code for this event here:
}
/**
- Adds an event handler that runs when the element is clicked.
Read more - @param {$w.MouseEvent} event
*/
This page could filter better. It is decent, but could run smoother. Here is additional code I wrote, but keep getting an error on the Line 24 of the code:
…filters: Here is the error message: A spread argument must either have a tuple type or be passed to a rest parameter.
import wixData from ‘wix-data’;
$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
// Add event handlers for input elements and dropdowns
$w(‘#input2’).onChange(applyFilters);
$w(“#input1”).onChange(applyFilters);
$w(“#dropdown1”).onChange(applyFilters);
$w(“#dropdown2”).onChange(applyFilters);
function applyFilters() {
// Create separate filter conditions for each input or dropdown
const cityFilter = $w("#input2").value ? wixData.filter().contains("city", $w("#input2").value) : null;
const stateFilter = $w("#input1").value ? wixData.filter().contains("state", $w("#input1").value) : null;
const areaFilter = $w("#dropdown1").value ? wixData.filter().eq("areaOfSpecialization", $w("#dropdown1").value) : null;
const sportFilter = $w("#dropdown2").value ? wixData.filter().eq("sportSpecialization", $w("#dropdown2").value) : null;
// Create an array of filter conditions
const filters = [cityFilter, stateFilter, areaFilter, sportFilter].filter(filter => filter !== null);
// Combine the filter conditions using 'and' operator
let combinedFilter = wixData.filter();
if (filters.length > 0) {
combinedFilter = combinedFilter.and(...filters);
}
// Apply the combined filter to the dataset
$w('#dataset1').setFilter(combinedFilter);
}
});
});