Hello i create a search bar, a reapeater and a dataset. Its a search engine for product from different shops! When the results showing up in the repeater, i would like to filter them with a dropdown, where u can filter by shop! I found nothing at all online, or i’m on the wrong direction?!
Anyone can bring to to the right direction please? I am coding beginner! Thnks in advance Martin
Hello Martin,
well first at all did you use CODE, or did you all with the given options of Wix?
You should give some more informations about the structure of your project?
How looks like your DB (database) ?
Probably you will have to do it with CODE.
Thx for y answer! Well i use code for the search bar but not for the the dropdown yet! In the dataset there is a column for the shops, so i would like to filter the results after the search! So i guess i need to make an onChange with the dropdown, but i dont know where to start actually! So this is my code so far! I have a search in startpage who shows the result in that page! My DB is quite big, but with title, description pricing, link, and shop!
import {local} from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;
$w.onReady( function () {
var sameWord = local.getItem( “searchWord” );
$w( "#searchBar" ).value = sameWord;
//$w(“#searchBar”).placeholder = sameWord;
$w( '#dataset3' ).onReady( **function** () {
search();
});
});
let debounceTimer;
export function searchButton_click() {
//Add your code for this event here:
$w( "#loadingGif" ).show();
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
$w( "#dataset3" ).setFilter(wixData.filter().contains( "title" , $w( '#searchBar' ).value)
.or(wixData.filter().contains( "shop" , $w( '#searchBar' ).value)))
.then(() => {
count();
})
}, 200 );
search();
}
function count() {
let total = $w( ‘#dataset3’ ).getTotalCount();
if (total > 1 ) {
$w( '#textResults' ).text = `${total} nachhaltige Produkte gefunden.`;
$w( "#loadingGif" ).hide();
$w( '#textResults' ).show();
}
if (total === 1 ) {
$w( ‘#textResults’ ).text = ${total} nachhaltiges Produkt gefunden.;
$w( “#loadingGif” ).hide();
$w( ‘#textResults’ ).show();
}
if (total === 0 ) {
$w( ‘#textResults’ ).text = “Leider nichts gefunden. Bitte probiere einen ähnlichen Begriff” ;
$w( “#loadingGif” ).hide();
$w( ‘#textResults’ ).show();
}
}
function search() {
wixData.query( 'Produkte2020NEU' )
.contains( 'title' , $w( "#searchBar" ).value)
.or(wixData.query( 'Produkte2020NEU' ).contains( 'shop' , $w( "#searchBar" ).value))
.or(wixData.query( 'Produkte2020NEU' ).contains( 'kategorie' , $w( "#searchBar" ).value))
.limit( 10 )
.ascending ( "preis" )
.find()
.then(res => {
$w( ‘#repeater3’ ).data = res.items;
});
}
Try this one… (i did not test it, so you have to otimize it and also modify it to your own needs).
import {local} from 'wix-storage';
import wixData from 'wix-data';
var SEARCH_RESULTS, myArray=[]
$w.onReady(function () {
var sameWord = local.getItem("searchWord");
$w("#searchBar").value = sameWord;
//$w("#searchBar").placeholder = sameWord;
$w('#dataset3').onReady(function () {
search();
});
});
let debounceTimer;
export function searchButton_click() {
$w("#loadingGif").show();
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
$w("#dataset3").setFilter(wixData.filter().contains("title", $w('#searchBar').value)
.or(wixData.filter().contains("shop", $w('#searchBar').value)))
.then(() => {count();})
}, 200);
search();
}
function count() {
let total = $w('#dataset3').getTotalCount();
if (total > 1) {
$w('#textResults').text = `${total} nachhaltige Produkte gefunden.`;
$w("#loadingGif").hide();
$w('#textResults').show();
}
if (total === 1) {
$w('#textResults').text = `${total} nachhaltiges Produkt gefunden.`;
$w("#loadingGif").hide();
$w('#textResults').show();
}
if (total === 0) {
$w('#textResults').text = "Leider nichts gefunden. Bitte probiere einen ähnlichen Begriff";
$w("#loadingGif").hide();
$w('#textResults').show();
}
}
function search() {
wixData.query('Produkte2020NEU')
.contains('title', $w("#searchBar").value).or(wixData.query('Produkte2020NEU')
.contains('shop', $w("#searchBar").value)).or(wixData.query('Produkte2020NEU')
.contains('kategorie', $w("#searchBar").value))
.limit(10)
.ascending ("preis")
.find()
.then(res => {
SEARCH_RESULTS = res //<--Übergabe der DATEN! (SEARCH-RESULTS = GLOBALE-VARIABLE siehe oben!)
$w('#repeater3').data = res.items;
});
}
export function dropdown1_change(event) {
var VALUE = "Waschbär"
ERWEITERTE_SUCHE (VALUE)
}
function ERWEITERTE_SUCHE (VALUE){
let dataLength = SEARCH_RESULTS.length
for (var i = 0; i < dataLength; i++) {
if (SEARCH_RESULTS.items[i].shop === VALUE) {
myArray.push(SEARCH_RESULTS.items[i])
console.log(SEARCH_RESULTS.items[i].shop)
}
}
console.log(myArray)
}
Also take a look onto CONSOLE!
Viel Erfolg!
Oh thanks for the Code! Appreciate that! Well that looks quite good, There is a step 
So when i have my results i can choose from the dropdown the shop! But just the shop"Waschbär" (logic cause of the code) But i have several shops to choose- See the picture below! How can i trigger the code? So i have about 15 different shops to choose, according to the results! Danke 
Yes your analyse is correct! I took just a static VALUE → “Waschbär” as an example. Of course you have to modify this part of CODE, and do the VALUE —> dynamic!
Logical-way—>
So why you don’t do it? 
export function dropdown1_change(event) {
//var VALUE = "Waschbär" <------ OLD (static)
var VALUE = $w('#dropdown1').value //<-- NEW (dynamic)
ERWEITERTE_SUCHE (VALUE)
}
function ERWEITERTE_SUCHE (VALUE){
let dataLength = SEARCH_RESULTS.length
for (var i = 0; i < dataLength; i++) {
if (SEARCH_RESULTS.items[i].shop === VALUE) {
myArray.push(SEARCH_RESULTS.items[i])
console.log(SEARCH_RESULTS.items[i].shop)
}
}
console.log(myArray)
}
Yeah as i mentioned, i am quite basic with coding 
so its super complicated for me actually! Well i replaced the code! So i am wondering, cause it still filter the results all to “Waschbär”. Do i have to disconnect the filter options as well with the DB?!
When u say make it dynamic, i was allready out of the GAME 
I need to change settings in the DD? I guess i watched to much tutorials and there are tooo many ways 
Yes probably you are now MIXING the NON-CODE-WAY with the CODE-WAY.
You can use either the one OR the other way. It is not recommended to mix them!
But before you start to make changes on your settings, check this…
export function dropdown1_change(event) {
//var VALUE = "Waschbär" <------ OLD (static)
var VALUE = $w('#dropdown1').value //<-- NEW (dynamic)
console.log("VALUE-I: " + VALUE)
ERWEITERTE_SUCHE (VALUE)
}
function ERWEITERTE_SUCHE (VALUE){console.log("VALUE-II: " + VALUE)
let dataLength = SEARCH_RESULTS.length
for (var i = 0; i < dataLength; i++) {
if (SEARCH_RESULTS.items[i].shop === VALUE) {
myArray.push(SEARCH_RESULTS.items[i])
console.log(SEARCH_RESULTS.items[i].shop)
}
}
console.log(myArray)
}
Check if the value is sent to the function (ERWEITERTE_SUCHE) properly.
(Nicht dass der übergebene Wert bei der function nicht ankommt).
Use the CONSOLE to check RESULTS!
Yes i tried another way before with coding and didnt connect the DD at all, but there were just multiply content and it doesnt work at all. However…
In this case, i allready connected the DD with the DB before, that means i am using the filter options with the DB! So i modified the DD with all the different values! Now when i changed your Code, there is deffinetly an impact, but its still just showing the Shop “Waschbär” for example even if i clicked the Shop “vekoop” or another one! So its filtering! But not 100% Maybe its a cache?! u can see in the pictures below
You will have to fill your repeater → with CODE!
$w('#repeater1').data = myArray
export function dropdown1_change(event) {
//var VALUE = "Waschbär" <------ OLD (static)
var VALUE = $w('#dropdown1').value //<-- NEW (dynamic)
console.log("VALUE-I: " + VALUE)
ERWEITERTE_SUCHE (VALUE)
}
function ERWEITERTE_SUCHE (VALUE){console.log("VALUE-II: " + VALUE)
let dataLength = SEARCH_RESULTS.length
for (var i = 0; i < dataLength; i++) {
if (SEARCH_RESULTS.items[i].shop === VALUE) {
myArray.push(SEARCH_RESULTS.items[i])
console.log(SEARCH_RESULTS.items[i].shop)
}
}
console.log(myArray)
$w('#repeater1').data = myArray
}
Ok i will have a look!
I just copied the code like u send, and disconnected the filter options with the DB! So its KINDA working I can start the filter with the first shop i choose a shop and i have 4 results for eg! when i want to filter with another shop, its not changing the products, its adding the next products just under the results i had before 
so and so on. So i dont know ?!
Yes this is also correct!
You are filling your ARRAY — >myArray with more and more results!
-Search-Round-1: you get 4-results which will be placed in → myArray.
-Search-Round-2: you get 5-results which also will be recorded into myArray.
You have now already 9-items in your Array (4xWaschbär, 5x-Kampfhase).
But you do not want this right? You want always to have just separated results for each SEARCH. So you have to RESET → myArray before filling it up, with new VALUES, right?
You should think in logical way, when you are using code. NOTHING happens if you do not CODE it! Since you have disconnected the predefined Wix-Options of the DATASET, now you have to CODE every, single step, like you want it to be.
This STEP is also calling → CUSTOMIZATION .
P.S.: Hier der code zum RESETEN !
myArray = []
Hey and thank you for the rest of the code, that was totally helpful and exactly i was looking for!! Thank u for that! As well for the explanation, step by step i learn a little bit more of coding 
But it looks like there is bug. For eg: I have abt 200 product results in total (incl 50 of Store Waschbär) so when i choose Waschbär it just show me 6 or 5 or 7! Looks randomly even there is no limit in the code?! As well i connect a “pagination” (10 products per page) to skip to the next site. So even it has filtered more then 10 products for one shop and i click to the next page, the filter looks not working anymore, cause i have the result of all shops again?! U think this is an extra Thread here or u might can help me to point in the right direction?! Thank u again, Martin
Hello again, you say that you have connected PAGINATION to your DATA. How did you do that? Using —> DATASET? How does it communicate with the DB ?
I think this way will not work. As i already told you the following…
You should think in logical way, when you are using code. NOTHING happens if you do not CODE it! Since you have disconnected the predefined Wix-Options of the DATASET, now you have to CODE every, single step, like you want it to be.
All features which you want to include right now, you will have to code.
You want a pagination, then you will have to code/create, this function by your own.
Therefore you will surely need the SKIP -function…
https://www.wix.com/corvid/reference/wix-data/query
To your question, why you do not get all RESULTS when after filtering process… this could be your answer…
function search() {
wixData.query('Produkte2020NEU')
.contains('title', $w("#searchBar").value).or(wixData.query('Produkte2020NEU')
.contains('shop', $w("#searchBar").value)).or(wixData.query('Produkte2020NEU')
.contains('kategorie', $w("#searchBar").value))
.limit(10) //increase the LIMITATION here to 1000 or what ever.
.ascending ("preis")
.find()
.then(res => {
SEARCH_RESULTS = res
$w('#repeater3').data = res.items;
});
}
export function dropdown1_change(event) {
var VALUE = $w('#dropdown1').value
console.log("VALUE-I: " + VALUE)
ERWEITERTE_SUCHE (VALUE)
}
function ERWEITERTE_SUCHE (VALUE){console.log("VALUE-II: " + VALUE)
let dataLength = SEARCH_RESULTS.length
for (var i = 0; i < dataLength; i++) {
if (SEARCH_RESULTS.items[i].shop === VALUE) {
myArray.push(SEARCH_RESULTS.items[i])
console.log(SEARCH_RESULTS.items[i].shop)
}
}
console.log(myArray)
$w('#repeater1').data = myArray
}
Hey hey, yes i just connected it with the dataset! But not by coding!
Yes i noticed, whenever i create something with code, another tool (here for eg. pagination) now has to modify by code as well! Puh! It’s challenging 
. limit ( 10 ) //increase the LIMITATION here to 1000 or what ever.
The problem i have with this, when i increase this number, its showing exactly the amount of results in the repeater, even i said directly the repeater in the settings max. 10 for eg! So when i increase it to 50, and i go to preview page i will have 50 results! As well i guess there is a problem between the filter search and the query search i have in this code! Well i will have a look with “Skip” function Thank u