Search a Database: w/ 3 dropdowns and search input?!

Ask the community
,
1

Hi everyone, getting quite frustrated with myself for not being able to work this one out. I am trying to search a database using the title search and filtering through an ‘experts’ database (filtering specialities, locations, and languages).

I will leave the code below and here is the link to original example (with one dropdown).

Thanks for any help,
- James.

import wixData from "wix-data";

$w.onReady(() => {
  loadSpecialty();
});

$w.onReady(() => {
  loadlanguage();
});

$w.onReady(() => {
  loadlocations();
});

let lastFilterTitle;
let lastFilterSpecialty;
let lastFilterlocations;
let lastFilterlanguage;

let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterSpecialty, lastFilterlocations, lastFilterlanguage);  
  }, 500);
}

export function iSpecialty_change(event, $w) {
  filter(lastFilterTitle, $w('#iSpecialty').value, lastFilterlocations, lastFilterlanguage);
}

export function iLocation_change(event, $w) {
  filter(lastFilterTitle, $w('#iLocation').value, lastFilterSpecialty, lastFilterlanguage);
}

export function ilanguage_change(event, $w) {
  filter(lastFilterTitle, $w('#iLanguage').value, lastFilterSpecialty, lastFilterlocations);
}

function filter(title, specialty, location , language) {
 if (lastFilterTitle !== title || lastFilterSpecialty !== specialty || lastFilterlocations !== location || lastFilterlanguage !== language) {
 let newFilter = wixData.filter();
 if (title)
      newFilter = newFilter.contains('title', title);
 if (specialty)
      newFilter = newFilter.contains('specialty', specialty);
 if (location)
      newFilter = newFilter.contains('location', location);
 if (language)
      newFilter = newFilter.contains('language', language);
    $w('#expertsDataset').setFilter(newFilter);   
    lastFilterTitle = title; 
    lastFilterSpecialty = specialty;
    lastFilterlocations = location;
    lastFilterlanguage = language;
  }
}

function loadSpecialty() {
  wixData.query('Specialty')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'Specialty'}];
      options.push(...res.items.map(specialty => {
 return {"value": specialty.title, "label": specialty.title};
      }));
      $w('#iSpecialty').options = options;
    });

}

function loadlocations() {
  wixData.query('locations')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'Locations'}];
      options.push(...res.items.map(location => {
 return {"value": location.title, "label": location.title};
      }));
      $w('#iLocation').options = options;
    });

}

function loadlanguage() {
  wixData.query('language')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'Languages'}];
      options.push(...res.items.map(language => {
 return {"value": language.title, "label": language.title};
      }));
      $w('#iLanguage').options = options;
    });

}
2

A couple things…

You should only use one onReady() function that has all of the code from the three you currently have.

When you call the function filter(title, specialty, location , language) , the parameters need to be in the correct order. In your 3 onChange events (eg. iSpecialty_change) you shouldn’t always put the changed value as the second parameter. Rather, all four parameters need to be passed to the function in the order that they are defined in the function definition: title, specialty, location, language .

3

Thank you so much, Yisrael! You are a ‘superstar.’