Multiple search fields (input fields and dropdown elements)

Ask the community
,
1

Hi!

I’m working on multiple field searches to be displayed at once. I want my users to be able to find their search from a database. Users search for: “Location” (input field), “Age”(dropdown), " Language"(dropdown) and “Date and Time”(calendar) for classes (they must fill out “location” and choose an option for each dropdown). Dataset: ‘formulariogrupo’

I can only find a way to allow users to search one field of the database (location), but I’m having problems when adding dropdown searches…

Have been reading wix tutorials and following forums closely which has helped a lot but I still have some errors when running the code. My table isn’t connected to the dataset so I’m defining columns using the API for tables .
Appreciate any comments or suggestions!
This is what I have so far:

import wixData from ‘wix-data’;
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady(function () {
$w(“#table1”).columns = [
{
“id”: “location”, // ID of the column for code purposes
// // The field key in the collection whose data this column displays
“dataPath”: “address”,
“label”: “Address”, // The column header
“width”: 100, // Column width
“visible”: true, // Column visibility
“type”: “string”, // Data type for the column
} ,
{
“id”: “age”,
“dataPath”: “ageRecommendations”,
“label”: “Age Suggested”,
“width”: 100,
“visible”: true,
“type”: “string”,
} ,
{
“id”: “language”,
“dataPath”: “language”,
“label”: “Language”,
“width”: 100,
“visible”: true,
“type”: “string”,
} ,
{
“id”: “dateandtime”,
“dataPath”: “timeDate”,
“label”: “Date & Time”,
“width”: 100,
“visible”: true,
“type”: “string”,
}];
});

//TODO: write your page related code here...

export function search_click(event, $w) {
//Add your code for this event here:
// Runs a query on the “formulariogrupo” collection
wixData.query(‘formulariogrupo’)
.contains(‘location’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
};
export function dropdown3_click(event, $w) {
//Add your code for this event here:
wixData.query(‘formulariogrupo’)
.contain (‘ageRecommendations’, $w(‘#dropdown3’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
}

export function dropdown2_click(event, $w) {
//Add your code for this event here:
wixData.query(‘formulariogrupo’)
.contain (‘language’, $w(‘#dropdown2’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
}

export function datePicker1_click(event, $w) {
//Add your code for this event here:
.contain (‘timeDate’, $w(‘#datePicker1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
}

2

What exactly is the problem here? Don’t you know how to add more .contains just add them row by row in your query. Read the API.

3

Hi Andreas! I’m new with Java and wix. Do you mean that I only need to call one export function?
I did this and don’t see errors in the code but I don’t receive results, none…

export function search_click(event, $w) {
//Add your code for this event here:
// Runs a query on the “formulariogrupo” collection
wixData.query(‘formulariogrupo’)
.contains(‘location’, $w(‘#input1’).value)
.contains(‘ageRecommendations’, $w(‘#dropdown3’).value)
.contains(‘language’, $w(‘#dropdown2’).value)
.contains(‘timeDate’, $w(‘#datePicker1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
});
}

Thank you in advance for your help!

4

Hi Natuc,
I would recommend to use setFilter method (assuming that the table is connected to the dataset).
Example:

$w("#myDataset").setFilter( wixData.filter()
  .startsWith("lastName", "D")
  .ge("age", "21")
)

For more information:

Roi.

5

hi, im starting code and i need make some like this https://ibjjf.com/ranking/ somebody can help me?
thank you