Filtering Database by selection tags AND search feature

I can’t seem to work out how to filter a database to search a table by both search AND selection tags so they either work independently or when the other has been selected.

https://www.sloungebar.com.au/copy-of-karaoke

I’m trying to base the code on what worked for my other site using a drop down menu but it just isn’t working.

import wixData from “wix-data” ;

$w.onReady(() => {
wixData.query( ‘KaraokeSongs’ )
.find()
.then(res => {
let options = [{ “value” : ’ ’ , ‘label’ : ‘All Categories’ }];
$w( ‘#STAG1’ ).options = options;
options.push(…res.items.map(title => {

const uniquecategory = getUniquecategory(res.items);
$w( “#STAG1” ).options = buildOptions(uniquecategory);
}));
})
function getUniquecategory(items) {
const categoryOnly = items.map(item => item.category);
return [… new Set(categoryOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map (curr => {
return {label:curr, value:curr};
});
}
});

let lastFiltercategory;
let lastFiltersong;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iTitle’ ).value, lastFiltercategory);
}, 200 );
}

function filter(song, category) {
if (lastFiltersong !== song || lastFiltercategory !== category) {
let newFilter = wixData.filter();
if (song)
newFilter = newFilter.contains( ‘title’ , song);
if (category)
newFilter = newFilter.eq( ‘category’ , category)
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFiltersong = song;
lastFiltercategory = category;
}
}
export function STAG1_change(event, $w) {
filter(lastFiltersong,$w( ‘#STAG1’ ).value);
}

Is there an example code I haven’t been able to find that anyone can point me to?

cheers kindly.

https://russian-dima.wixsite.com/meinewebsite/filter-my-phones

Hmm might be a bit beyond me in terms of swapping to a search field. Will probably stick to selection tags only.

Is there code so that when you select another tag two aren’t selectedfor the bottom code?

import wixData from ‘wix-data’;
export function STAG1_change(event) {
let selectedTags = $w(“#STAG1”).value;
let filter = wixData.filter();
if (selectedTags) {
filter = filter.hasAll(“category”, selectedTags);
}
$w(‘#dataset1’).setFilter(filter);
}

Thanks kindly

@lukefarrugia80

You can manually manipulate how many tags you want to be activated (selected) at once.

GET:

let selectedIndices =$w("#mySelectionTags").selectedIndices;

SET:

$w("#mySelectedTags").selectedIndices=[0,2];