Filter seems to be holding the first value in the dropdown

Ask the community
,
1

I need to use multiple inputs to filter a repeater.

I have 3 dropdowns that I am populating with code.

If a user selects just the first dropdown then it is not showing anything in the repeater. They currently have to choose all three.

I want it to be a case of, if they choose just the first dropdown, then only that is used to filter. If they choose the first and second, only the first and second are used to filter. If they use the first and last, only they are used to filter.

It currently appears as if the first option in the dropdown is being used as a placeholder until another option is chosen.

Any help is much appreciated.

Code:

$w.onReady(function () {

wixData.query("Properties")
        .ascending("country")
        .distinct("country")
        .then(($dropBuild) => {
            for (let i = 0; i < $dropBuild.items.length; i++) {
                let $dropVal = $w('#country').options
                $dropVal.push({ "label": $dropBuild.items[i], "value": $dropBuild.items[i] })
                $w('#country').options = $dropVal;
            }
        })
        
wixData.query("Properties")
        .ascending("stateprovince")
        .distinct("stateprovince")
        .then(($dropBuild) => {
            for (let i = 0; i < $dropBuild.items.length; i++) {
                let $dropVal = $w('#stateProvince').options
                $dropVal.push({ "label": $dropBuild.items[i], "value": $dropBuild.items[i] })
                $w('#stateProvince').options = $dropVal;
            }
        })

wixData.query("Properties")
        .ascending("city")
        .distinct("city")
        .then(($dropBuild) => {
            for (let i = 0; i < $dropBuild.items.length; i++) {
                let $dropVal = $w('#city').options
                $dropVal.push({ "label": $dropBuild.items[i], "value": $dropBuild.items[i] })
                $w('#city').options = $dropVal;
            }
        })
        
        $w('#searchButton').onClick(() => {
        let searchStateProvince = wixData.filter().eq("stateprovince", $w('#stateProvince').value)
        let searchCity = wixData.filter().eq("city", $w('#city').value)
        let searchIndustry = wixData.filter().eq("industry2", $w('#industry').value)

        let dbFilter = searchStateProvince.and(searchCity).and(searchIndustry);
        $w('#propertiesDataset').setFilter(dbFilter);
    })  
});
2

Okay, so I have discovered that it should be working. I can’t seem to find anything particularly wrong with it. The problem I am having is that the result Quebec will not show at all when selecting StateProvince. It seems like the only result that refuses to show :man_shrugging:

3

Some further testing has discovered that because the City field in the database is empty, then it was causing some issues.

4

Try this, this should solve the issue

$w('#searchButton').onClick(()=>{
    var searchStateProvince = $w('#stateProvince').value
    var searchCity = $w('#city').value
    var searchIndustry = $w('#industry').value
    
    let  filter = wixData.filter()
 
    if(searchStateProvince ){
        filter = filter.eq("stateprovince", searchStateProvince )
    }
    if(searchCity){
        filter = filter.eq("city", searchCity)
    }
    if(searchIndustry){
        filter = filter.eq("industry2", searchIndustry)
    }
    $w("#dynamicDataset").setFilter(filter)
   
   })
5

Amazing. This works perfectly!

6

Once again, thanks for this. It works perfectly when used with onClick!

On the homepage of the site, there are dropdown filters. When these are selected, it saves the values in a sessionStorage and then redirects to the page to search. When the page loads, it adds the values to the dropdowns from the storage and then filters the page. All the values and storage is working, but when it filters on ready, it is filtering by .or not .and

Do you know why it might be doing .or on ready but .and when clicking the search button?

Let me know if you need to see the code I have in place

7

@noahlovell Send the code so I can take a look (code from homepage and filter page)

8

@jarod

Homepage:

export function searchButton_click(event) {
validation()
}

function validation() {
    let validationMessage = " ";
    if ($w("#stateProvince").valid && $w("#city").valid && $w("#industry").valid) {
        let stateProvince = $w('#stateProvince').value
        session.setItem("stateProvinceSearch", stateProvince)

        let city = $w('#city').value
        session.setItem("citySearch", city)

        let industry = $w('#industry').value
        session.setItem("industrySearch", industry)
        
        wixLocation.to("/properties");
    } else {
        if (!$w("#stateProvince").valid) {
            validationMessage += "Please choose a State/Province.\n"
        }
        if (!$w("#city").valid) {
            validationMessage += "Please choose a city.\n"
        }
        if (!$w("#industry").valid) {
            validationMessage += "Please choose an industry.\n"
        }
        $w("#textErr").text = validationMessage
        $w("#textErr").show().then(() => {
        $w("#stateProvince, #city, #industry").updateValidityIndication();
            
        })
    }
}

Filter Page:

$w.onReady(function () {
    count()
    
    $w("#propertiesDataset").onReady( () => {
    let industrySearchResult = session.getItem("industrySearch");
    let citySearchResult = session.getItem("citySearch");
    let stateProvinceSearchResult = session.getItem("stateProvinceSearch");

    $w("#stateProvince").value = stateProvinceSearchResult
    $w("#city").value = citySearchResult
    $w("#industry").value = industrySearchResult
  
            var searchStateProvince = $w('#stateProvince').value
            var searchCity = $w('#city').value
            var searchIndustry = $w('#industry').value
    
            let  filter = wixData.filter()
            
            if(searchStateProvince){
                filter = filter.eq("stateprovince", searchStateProvince)
            }
            if(searchCity){
                filter = filter.eq("city", searchCity)
            }
            if(searchIndustry){
                filter = filter.eq("industry2", searchIndustry)
            }
            if(searchCountry){
                filter = filter.eq("country", searchCountry)
            }
            if(searchAmenities){
                filter = filter.hasSome("amenities", searchAmenities)
            }
            $w("#propertiesDataset").setFilter(filter)
            .then(() => {
            session.clear();
            count();
            }) 
 });
9

@noahlovell Try this (sorry the copy paste is a little messed up)

$w.onReady(function(){
count()
$w("#propertiesDataset").onReady(()=>{
let industrySearchResult=session.getItem("industrySearch");
let citySearchResult=session.getItem("citySearch");
let stateProvinceSearchResult=session.getItem("stateProvinceSearch");

$w("#stateProvince").value=stateProvinceSearchResult
$w("#city").value=citySearchResult
$w("#industry").value=industrySearchResult

var searchStateProvince=$w('#stateProvince').value
var searchCity=$w('#city').value
var searchIndustry=$w('#industry').value

let filter=wixData.filter()

if(searchStateProvince){filter=filter.eq("stateprovince",searchStateProvince)}

if(searchCity){filter=filter.eq("city",searchCity)}

if(searchIndustry){filter=filter.eq("industry2",searchIndustry)}

if(searchCountry){filter=filter.eq("country",searchCountry)}

if(searchAmenities){filter=filter.hasSome("amenities",searchAmenities)}

if(industrySearchResult){filter=filter.eq("stateprovince",industrySearchResult)}

if(citySearchResult){filter=filter.eq("city",citySearchResult)}

if(stateProvinceSearchResult){filter=filter.eq("industry2",stateProvinceSearchResult)}

$w("#propertiesDataset").setFilter(filter).then(()=>{session.clear();count();})});

The new part is just adding this in so that it filters right away.

if(industrySearchResult){filter=filter.eq("stateprovince",industrySearchResult)}

if(citySearchResult){filter=filter.eq("city",citySearchResult)}

if(stateProvinceSearchResult){filter=filter.eq("industry2",stateProvinceSearchResult)}

Let me know if this helps.

10

@jarod Okay, so it works in the sense that it is showing the value’s in the dropdown. However, it is telling me there is no result.

If I then press the search button it re-filters it and shows me a result

11

@noahlovell Build the filter in a new function. Call the function on button click, and also onReady. Right now it is only on button click so that is why.

12

@jarod That works, but it’s doing the same thing of filtering as .or rather than .and on ready