Multiple export functions for user input

Ask the community
,
1

Hello everyone!

I’m trying to have my user input export to search my dataset by both clicking the search button and pressing the Enter key. I have it working for clicking the search button, but I’m not sure how to search with the Enter key, or how to have either as an option.

This searches a large plant database so there’s lots of options for search fields.

This is what I have currently:

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);
});
}

Any help would be really appreciated!

Thanks!

2

Try this

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

$w ( “#input1” ). onKeyPress ( async ( event ) => {
if ( event . key === “Enter” ) {
await runSearch ();
}
});

$w ( "# button2 " ). onClick ( async ( event ) => {
await runSearch ();
});

});

export async function runSearch () {

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 );
});
}

Codedays
https://www.codedays-digital.com/