Multiple Search Bars on Dynamic Page

Ask the community
, ,
1

I am currently re-developing some of my layouts that formed part of the early design of my website. Basically I am looking to re-create lots of static pages with lots of tables into a dynamic page.

I am making good progress with this and have everything working as planned except for the need to have 2 separate search bars working together.

So I currently have one search bar [#classSearchBar] which is the search that allows users to search for their desired table by the [#class] value from my collection and this works with the following code:

"let debounceTimer;

export function classSearchBar_keyPress(event) {

if (debounceTimer) {

clearTimeout(debounceTimer);

debounceTimer = undefined;

}

debounceTimer = setTimeout(() => {

const filterValue = $w(‘[#classSearchBar]’).value

const byClass = wixData.filter().contains(“class”, filterValue)

$w(‘[#dynamicDataset]’).setFilter(byClass)

}, 200);

}"

I then have another search bar, [#fleetSearchBar], which I want to use to be able to then filter by lots of other values from the collection but for the result to only be for those that also meet the criteria of the [#classSearchBar]. As a stand alone for this, I have the following code:

"export function fleetSearchBar_keyPress(event) {

if (debounceTimer) {

clearTimeout(debounceTimer);

debounceTimer = undefined;

}

debounceTimer = setTimeout(() => {

const filterValue = $w(‘[#fleetSearchBar]’).value

const byNumber = wixData.filter().contains(“number”, filterValue)

const byFormation = wixData.filter().contains(“formation”, filterValue)

const byPreviousNumber = wixData.filter().contains(“previousNumber”, filterValue)

const byOperator = wixData.filter().contains(“operator”, filterValue)

const byLivery = wixData.filter().contains(“livery”, filterValue)

const byName = wixData.filter().contains(“name”, filterValue)

const byDepot = wixData.filter().contains(“depot”, filterValue)

const byStatus = wixData.filter().contains(“status”, filterValue)

const byLatestNews = wixData.filter().contains(“latestNews”, filterValue)

const byStaticNotes = wixData.filter().contains(“staticNotes”, filterValue)

const byPreviousLivery = wixData.filter().contains(“previousLivery”, filterValue)

const byPreviousOperator = wixData.filter().contains(“previousOperatorS”, filterValue)

const byPreviousName = wixData.filter().contains(“previousNameS”, filterValue)

$w(‘[#dynamicDataset]’).setFilter(byNumber.or(byFormation.or(byPreviousNumber.or(byOperator.or(byLivery.or(byName.or(byDepot.or(byStatus.or(byLatestNews.or(byStaticNotes.or(byPreviousLivery.or(byPreviousOperator.or(byPreviousName)))))))))))))

}, 200);

}"

Individually they both work but whatever I currently search for in the [#fleetSearchBar] is bringing up all results from the collection, irrelevant of what is input in the [#classSearchBar]

Can anyone point me in the right direction please?

2

Bit of a (UK) bank holiday bump to see if anyone can assist with this or whether I need to review my planned layout?

Thanks

3

I’ve progressed the code a little bit as below:

let debounceTimer;

export function classSearchBar_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}

debounceTimer = setTimeout(() => {
const filterValue = $w(‘#classSearchBar’).value
const byClass = wixData.filter().contains(“class”, filterValue)
$w(‘#dynamicDataset’).setFilter(byClass)
.then(() => {
let getItem = $w(‘#dynamicDataset’).getCurrentItem();
let url = wixLocation.to(/dmu-fleet/${$w('#classSearchBar').value});

    }
    
    )

}, 200);
}

export function fleetSearchBar_keyPress(event) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}

debounceTimer = setTimeout(() => {
const classFilterValue = $w(‘#classSearchBar’).value;
const fleetFilterValue = $w(‘#fleetSearchBar’).value;

const byClass = wixData.filter().contains(“class”, classFilterValue);

const byNumber = wixData.filter().contains(“number”, fleetFilterValue);
const byFormation = wixData.filter().contains(“formation”, fleetFilterValue);
const byPreviousNumber = wixData.filter().contains(“previousNumber”, fleetFilterValue);
const byOperator = wixData.filter().contains(“operator”, fleetFilterValue);
const byLivery = wixData.filter().contains(“livery”, fleetFilterValue);
const byName = wixData.filter().contains(“name”, fleetFilterValue);
const byDepot = wixData.filter().contains(“depot”, fleetFilterValue);
const byStatus = wixData.filter().contains(“status”, fleetFilterValue);
const byLatestNews = wixData.filter().contains(“latestNews”, fleetFilterValue);
const byStaticNotes = wixData.filter().contains(“staticNotes”, fleetFilterValue);
const byPreviousLivery = wixData.filter().contains(“previousLivery”, fleetFilterValue);
const byPreviousOperator = wixData.filter().contains(“previousOperatorS”, fleetFilterValue);
const byPreviousName = wixData.filter().contains(“previousNameS”, fleetFilterValue);

const fleetFilters = byNumber.or(byFormation.or(byPreviousNumber.or(byOperator.or(byLivery.or(byName.or(byDepot.or(byStatus.or(byLatestNews.or(byStaticNotes.or(byPreviousLivery
.or(byPreviousOperator.or(byPreviousName))))))))))))
const combinedFilter = byClass.and(fleetFilters);
$w(‘#dynamicDataset’).setFilter(combinedFilter);

}, 200);
}

Still not working but I feel that is now connected to the fact that when the dynamic page changes after I input the Class value into the class search bar, the value disappears from the class search bar.

Would there be a way to input into the class search bar, the dynamic page change and the value input into the search bar remain in situ?