Activate search using enter for multiple search boxes

Ask the community
,
1

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

2

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

Dima,

Thanks for your reply.
I’ve actually self-solved this one after spending hours staring at my code.

The issue with adding the code to allow search to activate on the pressing of enter was that my ‘runSearch’ code was hidden inside the export function for the click button to activate search. I have now moved the runSearch into it’s own function and amended the code for the export functions accordingly and it now works.

Such a silly error but one a novice like me can easily make I suppose - happy to have been able to solve it myself though as it shows a definite progress with my coding skills :slight_smile:

Thanks again for taking the time to respond - it is always appreciated.
And for anyone who may have come across this thread in their quest to solve their problem I say - stop reading here and go back to your code and try one more time to figure it out, it feels great to solve a problem by yourself :slight_smile: But if that has failed then below is the final code I have used to have a search function which can be activated both with a search click and onKeyPress (Enter) function:

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() {}

function runSearch(){
 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');

    }
}

$w.onReady(function () {
    $w('#iClass, #iNumber, #iPrevNumber, #iOperator, #iLivery, #iName, #iDepot, #iStatus, #iFormation').onKeyPress( (event) => {
 if(event.key === "Enter"){
            runSearch();
        }    
    })
 
});

export function searchButton_click(event) {

    runSearch();
 
}
4

@mattja19

:wink: well done!