Hello! I’d like to set up my search bar so that it saves user input in a collection that i can use later to refine my tags and improve on the search functionality. I’ve added a new collection to my site and a new dataset on the page search page itself to collect the data, but I’m trying to set this up after already coding my search functionality and what I’ve tried so far hasn’t really played nice with my current code. Here is what I have so far in its entirety:
//search bar//
export function input1_keyPress(event, $w, $) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
SearchBar = $w('#input1').value;
searchWords = SearchBar.split(" ");
filter(searchWords, lastFilterYear, lastFilterStreet, lastFilterStatus, lastFilterMedia);
}, 500);
$('#dataset2').save()
}
//dropdown search//
export function dropdownYear_change(event) {
filter(searchWords, $w('#dropdownYear').value, lastFilterStreet, lastFilterStatus, lastFilterMedia);
}
export function dropdownStreet_change(event, $w) {
filter(searchWords, lastFilterYear, $w('#dropdownStreet').value, lastFilterStatus, lastFilterMedia);
}
export function dropdownStatus_change(event, $w) {
filter(searchWords, lastFilterYear, lastFilterStreet, $w('#dropdownStatus').value, lastFilterMedia);
}
export function dropdownMedia_change(event, $w) {
filter(searchWords, lastFilterYear, lastFilterStreet, lastFilterStatus, $w('#dropdownMedia').value);
}
//combined filter//
function filter(wordArray, Year, Street, Status, Media) {
if (lastFilterSearch !== wordArray || lastFilterYear !== Year || lastFilterStreet !== Street || lastFilterStatus !== Status || lastFilterMedia !== Media)
{ let newFilter = wixData.filter()
if (wordArray)
for (let i=0; i < wordArray.length; i++)
newFilter = newFilter.contains('geo', wordArray[i])
.or(newFilter.contains('enLocationName', wordArray[i]))
.or(newFilter.contains('azLocationName', wordArray[i]))
.or(newFilter.contains('azYearFilmed', wordArray[i]))
.or(newFilter.contains('enYearFilmed', wordArray[i]))
.or(newFilter.contains('CurrentStatus', wordArray[i]))
.or(newFilter.contains('subject', wordArray[i]))
.or(newFilter.contains('media', wordArray[i]))
.or(newFilter.contains('description', wordArray[i]));
if (Year)
newFilter = newFilter.contains('enYearFilmed', Year);
if (Street)
newFilter = newFilter.contains('enLocationName', Street)
if (Status)
newFilter = newFilter.contains('CurrentStatus', Status)
if (Media)
newFilter = newFilter.contains('media', Media)
$w('#dataset1').setFilter(newFilter);
lastFilterSearch = wordArray;
lastFilterYear = Year;
lastFilterStreet = Street;
lastFilterStatus = Status;
lastFilterMedia = Media;
}
}
//loading dropdown filters//
function loadyear() {
wixData.query('year')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Years'}];
options.push(...res.items.map(year => {
return {"value": year.title, "label": year.title};
}));
$w('#dropdownYear').options = options;
});
}
function loadstreet() {
wixData.query('street')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Streets'}];
options.push(...res.items.map(street => {
return {"value": street.title, "label": street.title};
}));
$w('#dropdownStreet').options = options;
});
}
function loadstatus() {
wixData.query('status')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Statuses'}];
options.push(...res.items.map(stat => {
return {"value": stat.title, "label": stat.title};
}));
$w('#dropdownStatus').options = options;
});
}
function loadmedia() {
wixData.query('media')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Media'}];
options.push(...res.items.map(media => {
return {"value": media.title, "label": media.title};
}));
$w('#dropdownMedia').options = options;
});
}
I think the top ‘search bar’ bit is the only part that matters, but I wanted to include it all in case any changes I make risk breaking the rest of the code. Any ideas on how I can set it up so that user input in the search bar is saved in a collection?