Hi all!
I'm working on adding a search bar to a dataset on my site that will let users filter all the information in the collection. In preparing to set this up I created a 'tags' field in collection and filled it with some keywords. I then managed to find a bit of code that almost got the search bar working, so for example when a user typed in 'cat' they got back results from the collection that had 'cat' in the 'tags' field. However if they used more than one word, if they weren't entered exactly as they were in the 'tags' field they would get no results. For example 'animals cats' would get a result, but 'cats animals' wouldn't.
I've done some digging around and found code to help solve this problem by splitting the user search input into individual words and sort of Frankenstein'ed it into my old code. The resulting code technically works and has no errors, but also isn't working as intended. Now when a user types in words they only get results for whatever the last word they entered is. So for example I have three items tagged like this:
Item 1: animals, cats
Item 2: animals, dogs
Item 3: animals, cats, dogs
When a user inputs 'animals' they get all three items. When they search 'animals cats' they get the two items tagged with both 'animals' and 'cats'. When they search 'cats animals' they again get all three items. When they search 'animals cats dogs' they get the two items tagged with 'animals' and 'dogs'.
Here is the code I'm currently using:
import wixData from 'wix-data';
//wait until the page is loaded
$w.onReady(function () {
//when the search button is pressed on screen
$w('#button4').onClick((event) => {
//wait until the dataset is fully loaded or else we may be searching a partially loaded dataset
$w("#dataset1").onReady(() => {
//here we call the function called filter and execute it
filter();
//here we detail what the filter function does
function filter() {
let searchInput = ($w('#input1').value);
let searchWords = searchInput.split(' ');
for (let i=0; i < searchWords.length; i++)
$w("#dataset1").setFilter(
wixData.filter()
.hasAll("tags", searchWords[i])
Again this is really a combination of two different things I found on this forum so I could be lucky its doing anything at all 😹 Also note I cut out some }) at the bottom of this posted snippet to keep it clean. Right now there are no errors in the code according to the Wix developer console. I've also tried switching out .hasAll with .hasSome and .contains and gotten the same results.
The end result I would like is for the search bar to take the user input, compare it with the tags field, and return results that contain all of the input. Returning to the example above: both "animals cats" and "cats animals" would return only items tagged with both 'animals' and 'cats'. "Animals dogs cats" would return only items with all three tags. "Animals" would return all of the above.
I know I could replace this code with one using query and tying the results to a table, but I like the filtering function because after running a search the results can be further refined using dropdown menus, so if possible I'd like to keep it in this filtering framework.
You can play with the version using the above code here: www . mehelle. org/ list
Note that only three items have tags at all currently and they are in fact 'animals' 'cats' 'dogs' haha
Thanks all!
Update: I got the search bar working using completely different code!
import wixData from 'wix-data'; let searchWords, inputString, lastFilterTitle; $w.onReady(function () { $w("#input1").onKeyPress((event) => { let debounceTimer; if(debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { inputString = $w("#input1").value; searchWords = inputString.split(" "); runFilter(searchWords); }, 200); function runFilter(wordArray){ let filterSetting = wixData.filter(); for (let i=0; i < wordArray.length; i++) { filterSetting = filterSetting.contains('tags', wordArray[i]); } if (lastFilterTitle !== inputString) { $w('#dataset1').setFilter(filterSetting); lastFilterTitle = inputString; } } }) });
This worked perfectly, the bar is now finding items in the dataset that contain all of the inputted words regardless of what order they're put in and accounting for everything in the search bar. 'animals cats' and 'cats animals' return the same results.
However this code seems to break the dropdown filters I've set up when being used. I set these dropdowns up using just the basic wix functionality, no coding was involved. Right now if the search bar is ignored the user can still use the dropdowns to filter the dataset, but once the search bar is used it overrides the dropdowns. Is there a way to alter my code to have it still respect the dropdowns I set up after the search bar is used? So for example a user could type in 'animals' in the search bar, then use the dropdown to further filter the results of the search.
Thanks all!