Evening all,
I currently have a search function which incorporates 8 or 9 search boxes, in essence allowing the user to filter their search as they see fit using the fields in my dataset collection. There is also a dropdown box with 4 options in - 1 of these options results in 8 search boxes showing and the other 3 will show 9 search boxes. I have a vector image I use as the 'search click' button which currently activates any search conducted using the code below:
import { local } from 'wix-storage';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
});
export function dropdown1_change_1(event, $w) {
searchenable();
if (event.target.value === "Locomotives") {
$w('#iClass').enable();
$w('#iNumber').enable();
$w('#iPrevNumber').enable();
$w('#iOperator').enable();
$w('#iLivery').enable();
$w('#iName').enable();
$w('#iDepot').enable();
$w('#iStatus').enable();
$w('#iFormation').collapse();
$w('#searchButton').show();
} else if (event.target.value === "Diesel Multiple Units") {
$w('#iClass').enable();
$w('#iNumber').enable();
$w('#iPrevNumber').enable();
$w('#iOperator').enable();
$w('#iLivery').enable();
$w('#iName').enable();
$w('#iDepot').enable();
$w('#iStatus').enable();
$w('#iFormation').expand();
$w('#iFormation').enable();
$w('#searchButton').show();
} else if (event.target.value === "Electric Multiple Units") {
$w('#iClass').enable();
$w('#iNumber').enable();
$w('#iPrevNumber').enable();
$w('#iOperator').enable();
$w('#iLivery').enable();
$w('#iName').enable();
$w('#iDepot').enable();
$w('#iStatus').enable();
$w('#iFormation').expand();
$w('#iFormation').enable();
$w('#searchButton').show();
} else if (event.target.value === "All Traction") {
$w('#iClass').enable();
$w('#iNumber').enable();
$w('#iPrevNumber').enable();
$w('#iOperator').enable();
$w('#iLivery').enable();
$w('#iName').enable();
$w('#iDepot').enable();
$w('#iStatus').enable();
$w('#iFormation').expand();
$w('#iFormation').enable();
$w('#searchButton').show();
}
}
function searchenable() {}
export function searchButton_click(event) {
let word = $w('#iClass').value
local.setItem("searchWord", word);
let word4 = $w('#iNumber').value
local.setItem("searchWord2", word4)
let word3 = $w('#iPrevNumber').value
local.setItem("searchWord3", word3)
let word2 = $w('#iOperator').value
local.setItem("searchWord4", word2)
let word5 = $w('#iLivery').value
local.setItem("searchWord5", word5)
let word6 = $w('#iName').value
local.setItem("searchWord6", word6)
let word7 = $w('#iDepot').value
local.setItem("searchWord7", word7)
let word8 = $w('#iStatus').value
local.setItem("searchWord8", word8)
let word9 = $w('#iFormation').value
local.setItem("searchWord9", word9)
let option = $w('#dropdown1').value;
if (option === "Locomotives") {
wixLocation.to('/loco-results');
}
if (option === "Diesel Multiple Units") {
wixLocation.to('/dmu-results');
}
if (option === "Electric Multiple Units") {
wixLocation.to('/emu-results');
}
if (option === "All Traction") {
wixLocation.to('/all-traction-results');
}
}
This works perfectly but I would also like users to be able to user their "Enter" key to activate the search as well as the search button but I am struggling to get this to work.
I have used onKeyPress as an export function when setting this on a single search box in the past using the ...if(event.key === "Enter")... code and have managed to get it to work but I am struggling here with the multiple numbers of search boxes involved. I have tried something like the below I found elsewhere on here (obviously changing the code where necessary):
$w.onReady(function(){$w("#search1, #search2, #search3").onKeyPress((event)=>{if(event.key ==="Enter"){runSearch(event.target.id);}})
but this doesn't even manage to activate the search when I hit Enter!
Could someone put me out of my misery please, or if not that, at least point me in the right direction to finding a solution?
Thanks very much
Everything is OK with your following code-part.... (tested example ---> OK)
$w("#inputManualSearch").onKeyPress((event)=>{ if(event.key ==="Enter"){manual_Search()} })
$w.onReady(function(){ $w("#search1, #search2, #search3").onKeyPress((event)=>{ if(event.key ==="Enter"){runSearch(event.target.id);} }); });
You perhaps simply have forgot ----> }); <------- at the end of your code.
Start your ---> runSearch()-function with a console.log(), like...
function runSearch(VALUE){ console.log("Search started from " + VALUE) }