Youtube tutorial issue "How to Create a Search for Your Database"

Discussion Ask a question
,
1

Hello everyone,

I am nearly finish with my wix homepage, only need to get search drop down ready.
So I tried to do like wix youtube tutorial

But there is the problem when I click on drop down, the database column for example like in the tutorial ‘continent’ , repeats the continent like
Europe
Europe
Europe
South America
Asia

So Europe should only seen one times .
Can somebody show how the database from the tutorial is built up ?
Don’t think there is problem in code …
Homepagelink

Thanks in advance :slight_smile:

2

The Example: Remove duplicates from connected dropdown options will show you how to handle this problem.

2 Likes
3

Many thanks @yisrael-wix made your explanation up and now have no duplicates in my dropdown.
Unfortunately I have two new problems in my code
1.
I dont know how to get a label where all continents are together so there is no filter when choosing it.
In the tutorial its called “All continents”
2.
When I preview my site and choose a label in my dropdown the following error occurs.

2526×396 33.3 KB

Unhandled promise rejection TypeError: Error.captureStackTrace is not a function. (In ‘Error.captureStackTrace(s,s.constructor)’, ‘Error.captureStackTrace’ is undefined)

Thank you for your help !!!

4

Please tell me what page this is on. First, I see duplicates. Second, I don’t get the error.

5

To add “all” to the dropdown, see Jeff’s original post, Remove duplicates from connected dropdown options , where this is discussed.

6

@yisrael-wix sry I didnt published my done edit , so its the same page like described above.

7

@homepagefliesenmarti I wasn’t looking at the published site, I was looking at your site in the editor. I didn’t see duplicates in the dropdown and I didn’t get an error.

1 Like
8

Thank you @yisrael-wix for help in duplicates and “All” to dropdown , made my code up and everything is working.
Now the filter function isnt working when dropdown is selected , or more exact when selecting dropdown nothing is shown :((((

Working on this issue multiple times but unfortunately didnt find the mistake in the filter function .
Would you be so kind and help me out in my mistake ?

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixData from “wix-data”;
import wixLocation from ‘wix-location’;

let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
var cleanList;

$w.onReady( function () {
wixData.query(‘Holzoptik’).limit(1000).find().then(res => {
const uniqueTitles = getUniqueTitles(res.items);
cleanList = buildOptions(uniqueTitles);
cleanList.unshift({
“value”: ‘’,
“label”: ‘Alle Fliesen’
});
$w(‘#iFliesenoptik’).options = cleanList;
})

function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fliesenoptik);
return [… new Set(titlesOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr , value: curr };
});
}

$w("#repeater1").onItemReady(($w, dataItem, index) => {

let linkToDynamicPage = dataItem.linker;
$w(‘#button3’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});

    $w('#container1').onClick(() => { 
        wixLocation.to(linkToDynamicPage); 
    }); 
});

});

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

function filter(title, optik) {
if (lastFilterTitle !== title || lastFilterContinent !== optik) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘fliesenTitel’, title);
if (optik)
newFilter = newFilter.eq(‘fliesenOptik’, optik);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterContinent = optik;
}
//searchbar only works with this row
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘title’, title));
}

export function iFliesenoptik_change(event, $w) {
filter(lastFilterTitle, $w(‘#iFliesenoptik’).value);
}

Thank you in advance !

9

Your field names in the filter function are incorrect, and the last line in the function only checks for the search field and overwrites the new filter. Your filter function should look something like this:

function filter(title, optik) {
  if (lastFilterTitle !== title || lastFilterContinent !== optik) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('title', title);
    if (optik)
      newFilter = newFilter.eq('fliesenoptik', optik);
    $w('#dataset1').setFilter(newFilter);
    lastFilterTitle = title;
    lastFilterContinent = optik;
  }
}

Note the corrected field IDs: title (not fliesenTitel), fliesenoptik (not fliesenOptik)

Funny thing about computers - they’re pretty stupid and you have to make sure that everything is perfect in order for them to understand what you mean.

1 Like
10

Thank you !!