Anyone know how I can add more than one category to one item? For example, I’m a designer trying to put this in my portfolio to allow users to either search by keyword or use a dropdown/button option to categorize my work into things like branding, illustration, typography, etc. However, some of my pieces have both illustration and typography in them. How can I make it so that when a user selects “typography” or “illustration” or something, one specific piece of work could show up for both options?
mypurdy, just search both fields in the database “illustration” and “typography” and return all matching records from the database.
The video is not detailed enough,
When you add the gallery what you set up there to give results because to me it did not work and I did one on one
Is this search bar case sensitive? how can I make it case insensitive so both “A” and “a” give the same results?
Hi Yoav I copied it all and it does not work (I changed all the fields )
Hi everyone! the video starts with the search bar and the ‘search by content’ already in place, how do i add them to my page?
Thanks!
I am not a. coder but trying my best to learn. I watch the video and copied the code. the code works for me if you type a product name on the user input it searches that name but the all categories does not work. Can anybody check my code what I have done wrong? plus it says the title is not defined? (see photo)
import wixData from “wix-data”;
$w.onReady(() => {
wixData.query(‘Products’)
.find()
.then(res => {
let options = [{“value”: “”, ‘label’: ‘All Category’}];
options.push(…res.items.map(category => {
return {‘value’: category,title, ‘label’: category,title};
}));
$w(‘#Category’).options = options;
})
});
let lastFilterTitle;
let lastFilterCategory;
let debouncerTimer;
export function Title_keyPress(event,$w) {
if (debouncerTimer) {
clearTimeout(debouncerTimer);
debouncerTimer = undefined;
}
debouncerTimer = setTimeout(() => {
filter($w(‘#Title’).value, lastFilterCategory);
}, 500);
}
function filter(title, category) {
if (lastFilterTitle !== title || lastFilterCategory !== category) {
let newfilter = wixData.filter();
if (title)
newfilter = newfilter.contains(‘title’, title);
if (category)
newfilter = newfilter.eq(‘category’, category);
$w(‘#dataset9’).setFilter(newfilter);
lastFilterTitle = title;
lastFilterCategory = category;
}
}
export function Category_change(event, $w) {
filter(lastFilterTitle, $w(‘#Category’).value);
}
function loadCategory() {
wixData.query(‘Category’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All Category’}];
options.push(…res.items.map(category => {
return {“value”: category.title, “label”: category.title};
}));
$w(‘#Category’).options = options;
});
}
Hey Andreas,
Did you figure out how to search multiple data collections?
Thanks.
-Nelson
Hey
First of all get the data from your query or as in my code the repeater. The dropdown I have is ID sortingDropdown and I added the change event as below.
export async function sortingDropdown_change(event, $w) {
let products = await $w("#productRepeater").data;
if ($w("#sortingDropdown").value === "newest") {
$w("#productRepeater").data = products.sort(compareValues('_updatedDate', 'desc'));
} else if ($w("#sortingDropdown").value === "name") {
$w("#productRepeater").data = products.sort(compareValues('name', 'asc'));
} else if ($w("#sortingDropdown").value === "pricehigh") {
$w("#productRepeater").data = products.sort(compareValues('price', 'desc'));
} else if ($w("#sortingDropdown").value === "pricelow") {
$w("#productRepeater").data = products.sort(compareValues('price', 'asc'));
}
}
Then I have the function compareValues that helps me sort the array from my queries or repeater and I made it so I can send in the fieldKey I want to use and if I want it ascending or descending.
function compareValues(key, order='asc') {
return function(a, b) {
if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
// property doesn't exist on either object
return 0;
}
const varA = (typeof a[key] === 'string') ?
a[key].toUpperCase() : a[key];
const varB = (typeof b[key] === 'string') ?
b[key].toUpperCase() : b[key];
let comparison = 0;
if (varA > varB) {
comparison = 1;
} else if (varA < varB) {
comparison = -1;
}
return (
(order === 'desc') ? (comparison * -1) : comparison
);
};
}
This code works great and it is also very fast.
To search multiple data collections it will be time consuming so I always suggest you store the stuff you want to search in a separate Data Collection, maybe call it SearchIndex and in that you store all information that you need to search and you also store from which Data Collection the record comes from and that record ID so when search results show it you can easily redirect to the correct page.
Or you could use the OR operator in Wix Data and just enter the different Data Collection names because you can nest them and tell it different Data Collections.
Thanks Andreas! I admire your work. I’m working on the ranking system 
Hi, just a little question : Where can I find the same “search box” (with the little magnifying glass) ? 
Where am I wrong ? Please ? (https://www.listkara.com/listeartistes)
Knowing that the list of artists is a repeater
import wixdata from “wix-data”;
let debounceTimer;
export function iTitle_keypres(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w (‘#iTitle’).value);
}, 200);
}
let lastFilterTitle;
function filter(title) {
if (lastFilterTitle !== title)
$w(‘dataset1’).setFilter(wixdata.filter().countains(‘title’, title));
lastFilterTitle= title;
}
Hi,
let lastFilterTitle;
let debounceTimer;
export function searchBar_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w('#searchBar').value); // input ID
}, 100);
}
function filter(title) {
if (lastFilterTitle !== title) {
wixData.query("Stores/Products") // name of your database
.limit(5)
.contains('name', title) // fieldKey name of your Item in your database
.find()
.then(res => {
$w('#repeater1').data = res.items; // repeater ID
})
.catch( (error) => {
let errorMsg = error.message;
let code = error.code;
} );
lastFilterTitle = title;
}
}
Good luck
Yes, thanks ! It’s work. But I have a little problem now. On the preview, the repeater is displayed correctly, but online, I have 11 empty fields before the first artist…
Preview :
Online :
What is the problem ?
chack if you Sync the sandbox to live
Same thing
look in your debug Velo: Testing and Troubleshooting Your Code | Help Center | Wix.com
Has anyone ever figured out how to eliminate the duplicates that result in the drop down? Great search, but it creates a duplicate option for every listing you have…perhaps a check box?
Hey Jeff … checkout my dropdowns video tutorial to eliminate duplicate options:
YT Link: Conditional Filtering for Dropdowns on Wix | Corvid Tutorial - YouTube
Tutorial Site: https://codequeen.wixsite.com/dropdown