How do I properly add a "no value" option to a drop down?

Ask the community
,
1

I have successfully followed this tutorial for my gallery:

However, I am having trouble with one of the last steps where I have an “All Countries” option for the dropdown. In my context, it’s “All Makes” for automobiles. However, when I select it, all my photos disappear. The rest of the filter works, but it’s acting like it’s looking for “All Makes” as opposed to using that as an open filter.

Here is the code I’m using. Any help is appreciated!

import wixData from 'wix-data';

$w.onReady(() => {
    wixData('Make')
        .find()
        .then(res => {
 let options = [{"value": '', 'label': 'All Makes'}];
            options.push(...res.items.map(make => {
 return {'value': make.search, 'label': make.search};
            }));
            $w('#iMake').options = options;
        })
});

let lastFilterSearch;
let lastFilterMake;

let debounceTimer;
export function iSearch_keyPress(event, $w) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
 if (debounceTimer) {
        clearTimeout(debounceTimer);
    }
    debounceTimer = setTimeout(() => {
        filter($w('#iSearch').value, lastFilterMake);
    }, 200);
}

function filter(search, make) {
 if (lastFilterSearch !== search || lastFilterMake !== make) {
 let newFilter = wixData.filter();
 if (search)
            newFilter = newFilter.contains('model', search);
 if (make)
            newFilter = newFilter.eq('make', make);
        $w('#cardata').setFilter(newFilter);
        lastFilterSearch = search;
        lastFilterMake = make;  
    }
}

export function iMake_change(event, $w) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here:
    filter(lastFilterSearch, $w('#iMake').value) 
}

Bonus question:
Currently, the search bar sorts through the field “model” from my dataset. Is it possible for this bar to filter through multiple columns in a data set and return results matching “model”, “year”, etc?

2

the problem is that you’re trying to filter your collection based on this value.
You should do something like:

export function iMake_change(event) {
    value ===  "" ? $w('#cardata').setFilter() : filter(lastFilterSearch, $w('#iMake').value);
}
3

When I change my change event to reflect what you have provided I get an error telling me ‘value’ is not defined. I appreciate the help.

export function iMake_change(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here:
        value === "" ? $w('#cardata').setFilter() : filter(lastFilterSearch, 
    $w('#iMake').value); 
}
4

@havefun
Change it:

 $w('#iMake').value === "" ? $w('#cardata').setFilter() : filter(lastFilterSearch, 
    $w('#iMake').value);
5

@jonatandor35 If I do that I get functionality back, but the original issue of the “All Makes” option filtering everything out persists.

export function iMake_change(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here:
        $w('#iMake').value === "" ? $w('#cardata').setFilter() : filter(lastFilterSearch, 
    $w('#iMake').value); 
}
6

@havefun try:
$w ( ‘#iMake’ ). value === “” ? $w ( ‘#cardata’ ). setFilter ( wixData.filter() ) : filter ( lastFilterSearch ,
$w ( ‘#iMake’ ). value );

7

I think I fixed it:

export function iMake_change(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here:
 let filterType = $w('#iMake').value;
 if (filterType === "All Makes"){
         $w('#cardata').setFilter(wixData.filter());
   } else{
        $w('#cardata').setFilter(wixData.filter().contains("make", filterType));
   }  
 }
8

This is strange. I thought “All Makes” is the label not the value.

9

@jonatandor35 It was both, but what should the value have been to properly make your code work? I tried “null” but that wasn’t working. If there is a better way than having it reset the filter with All Makes I am totally open to it.

10

Here is the live site: https:// www.elementalg2. com/gallery (added spaces as I’m not allowed to link yet.

11

@havefun to reset the filter:

  $w('#cardata').setFilter(wixData.filter());
12
  • I went to your site and you have an error.
    You wrote there:
wixData('Make')

instead of

wixData.query('Make')
13

@jonatandor35 What should the value of All Makes be defined as in the drop-down?

14

@havefun here you defined the value:

 let options = [{"value": '', 'label': 'All Makes'}];

Of course you can set whatever value you wish just be consistent.