User Input Checkboxes for Dataset Search

Ask the community
,
1

Hello everyone!

I’m working on trying to create a search engine on my website and having a hard time of it.
Here is the page I am working on:
https://www.bgss.ca/search

1134×535 310 KB

Right now users can look through the drop down lists and then type in any search terms they want into the search bar. This then brings up all the plants with those terms in the table below.
Instead, I would like the user to be able to check off any number of the terms in the drop downs with the addition of a checkbox (will likely not stay as drop downs) and then click a button to display all plants with those terms in the table below.
I am definitely not a code expert, barely even a beginner. I have looked through the forums and how to pages, but can’t find the correlation between the user input of multiple check boxes, filtering the dataset with all the terms, and displaying it after a button is clicked.

Here is the code I have for the page right now:

import wixData from ‘wix-data’;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});

export function button2_onClick()
{

let searchValue = $w('#input1').value; 
let searchWords = searchValue.split(' '); 
let query = wixData.query('Plant_Database'); 
for (let i=0; i < searchWords.length; i++) 
{        
    query = query.contains('latinName', searchWords[i]); 
    query = query.contains('commonName', searchWords[i]); 
    query = query.contains('bloomColour', searchWords[i]); 
    query = query.contains('foliageColour', searchWords[i]); 
    query = query.contains('soil', searchWords[i]); 
    query = query.contains('notes', searchWords[i]); 
    query = query.contains('garden', searchWords[i]); 
    query = query.contains('light', searchWords[i]); 
    query = query.contains('water', searchWords[i]); 
    query = query.contains('zone', searchWords[i]); 
    query = query.contains('bloomTime', searchWords[i]); 
}

wixData.query(‘Plant_Database’)
.contains(‘latinName’, $w(‘#input1’).value)
.or(wixData.query(‘Plant_Database’).contains(‘commonName’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘bloomColour’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘foliageColour’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘soil’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘notes’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘garden’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘light’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘water’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘zone’, $w(‘#input1’).value))
.or(wixData.query(‘Plant_Database’).contains(‘bloomTime’, $w(‘#input1’).value))
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
})
.catch(err =>
{
console.log("problem in search! " + err);
});
}

export function Type_mouseIn() {
$w(‘#grType’).show();
}

export function Type_mouseOut() {
$w(‘#grType’).hide();
}

export function Height_mouseIn() {
$w(‘#grHeight’).show();
}

export function Height_mouseOut() {
$w(‘#grHeight’).hide();
}

export function Spread_mouseIn() {
$w(‘#grSpread’).show();
}

export function Spread_mouseOut() {
$w(‘#grSpread’).hide();
}

export function Light_mouseIn() {
$w(‘#grLight’).show();
}

export function Light_mouseOut() {
$w(‘#grLight’).hide();
}

export function Water_mouseIn() {
$w(‘#grWater’).show();
}

export function Water_mouseOut() {
$w(‘#grWater’).hide();
}

export function Zone_mouseIn() {
$w(‘#grZone’).show();
}

export function Zone_mouseOut() {
$w(‘#grZone’).hide();
}

export function bloomTime_mouseIn() {
$w(‘#grMonth’).show();
}

export function bloomTime_mouseOut() {
$w(‘#grMonth’).hide();
}

export function bloomCol_mouseIn() {
$w(‘#grCol’).show();
}

export function bloomCol_mouseOut() {
$w(‘#grCol’).hide();
}

export function foliCol_mouseIn() {
$w(‘#grFoliCol’).show();
}

export function foliCol_mouseOut() {
$w(‘#grFoliCol’).hide();
}

export function Soil_mouseIn() {
$w(‘#grSoil’).show();
}

export function Soil_mouseOut() {
$w(‘#grSoil’).hide();
}

export function Notes_mouseIn() {
$w(‘#grNotes’).show();
}

export function Notes_mouseOut() {
$w(‘#grNotes’).hide();
}

export function Garden_mouseIn() {
$w(‘#grGarden’).show();
}

export function Garden_mouseOut() {
$w(‘#grGarden’).hide();
}