Making a conditional dropbox product search

Ask the community
,
1

I am trying to make a conditional dropbox which would allow users to search for products on my site. I am still trying to get to the search part because my dropboxes arent working. When I get to the third one- the model selector- nothing shows up in the dropbox. I also dont know how to make it search my site after that so any help is appreciated.

import wixData from 'wix-data';
 
 $w.onReady(function () {

    dd1();

});

function dd1(){
    wixData.query("MakeandModel")
         .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#year").options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.year);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
 
        });
    }
}

export function year_change(event, $w) {

dd2();

 $w("#make").enable();

 }

function dd2(){
    wixData.query("MakeandModel")
         .contains("year", $w("#year").value)
         .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           $w("#make").options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.make);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

export function model_change(event, $w) {

dd3();
 
 $w("#model").enable();

 }
function dd3(){
    wixData.query("MakeandModel")
         .contains("make", $w("#make").value)
         .limit(1000)
       .find()
       .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
           ("#model").options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.model);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}
2

Hi,
I see that currently you are querying a database with one dropdown value only.

For all 3 options to be included, each time the change happens, you need to query the database with all 3 dropdown values.

You can see a step by step guide how to create such a search here .

In addition, you can see a mega search example here .