Database Search: "Search By" dropdown

Hi, I was wondering if someone could help me figure out how to achieve this? I am creating a database search. I have a dropdown element that reads “Search By” and a text input element. The results go to a table. I want the user to be able to chose whether they are searching by name, address, or phone number. How do I code the part that sets the dropdown value as the query or filter parameter?

Any help is appreciated! Thank you!

Do you have already some starting code, or a predifined database?
Do you use datasets?

@russian-dima
Yes, Here is my code so far. I am currently only searching by name and then filtering by city and type, but I would like to give the user the option to change the “Search By” dropdown to name, number, or address before typing in the text input. I am not sure how to achieve this.

import wixData from ‘wix-data’;
let debounceTimer;

//iSearchBy Dropdown Options
let lastFilterTitle;
let lastFilterNumber;
let lastFilterAddress;

//City & Type Filters
let lastFilterCity;
let lastFilterType;

//Sets the options of the iSearchBy Dropdown
$w.onReady(() => {
wixData.query(“dropdown”)
.ascending()
.find()
.then(res => {
let options = ;
options.push(…res.items.map(dropdown => {
return { “value”: dropdown.title, “label”: dropdown.title };
}));
$w(“#iSearchBy”).options = options;
})
})

//Sets the options of the iCity Dropdown + All Cities
$w.onReady(() => {
wixData.query(“city”)
.find()
.then(res => {
let options = [{ “value”: “”, “label”: “All Cities” }];
options.push(…res.items.map(species => {
return { “value”: city.title, “label”: city.title };
}));
$w(”#iCity).options = options;
})
})

//Sets the options of the iType Dropdown + All Types
$w.onReady(() => {
wixData.query(“type”)
.find()
.then(res => {
let options = [{ “value”: “”, “label”: “All Types” }];
options.push(…res.items.map(type => {
return { “value”: type.title, “label”: type.title };
}));
$w(“#iType”).options = options;
})
})

//Im not sure what to put here
export function iSearchBy_change(event, $w) {
}

export function input_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#input”).value, lastFilterSpecies, lastFilterType)

}, 500); 

}
export function iCity_change(event, $w) {
filter(lastFilterTitle, $w(“#iCity”).value);
}
export function iType_change(event) {
filter(lastFilterTitle, $w(”#iType").value);
}
function filter(title, city, type)
{ if (lastFilterTitle !== title ||
lastFilterCity !== city ||
lastFilterType !== type);
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’, title);
if (city)
newFilter = newFilter.contains(‘city’, city);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterCity = city;
lastFilterType = type;
}

I’m not sure what to put inside the on change event for the iSearchBy dropdown to set the filter parameter as the dropdown value. and where else in the code would I need to alter? Can someone help me out or point me in the right direction because I can’t find the answer to this anywhere. Thanks in advance!

Have you seen this example? [https://www.wix.com/velo/example/search-a-database](https://www.wix.com/velo/example/search-a-database
You)

All of the code is visible on the example page, or click “Edit Now” to open it as a template and see the working code. Hopefully this code will help answer your question.