pressing 'enter' key in user input box to 'click' button

Ask the community
,
1

hi,
Im in the process of making a search bar, I have an input box and a search button, works fine.
However, how do I add code so that if the ‘enter’ button is pressed then it clicks a button?
Thanks
Matt

2

Hi Matt,

You can trigger a function that runs the same query to links to the same page as your button does, using the code below:

$w.onReady( function () {
$w(“#input1”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
let searchstring = $w(“#input1”).value;
// Insert the same data query or link to dynamic page as your button is bound to here
}
});
});

Michiel

3

Hi Michiel,
Thanks for the reply.
It doesn’t seem to work, I want for when I type in my user input box for it to perform a ‘click’ even when pressing enter, I think I have gone wrong somewhere in my code;

import wixWindow from ‘wix-window’;
import {local} from ‘wix-storage’;

if (wixWindow.formFactor === “Mobile”){

$w(“#column5”).hide();
$w(“#column5”).collapse();}

import wixData from ‘wix-data’;

export function searchButtonPage_click(event) {

filter($w('#searchFieldPage').value);

function filter(title){
$w(‘#dynamicDataset’).setFilter(wixData.filter().contains(‘name’,title));

}

}
$w.onReady( function () {
$w(‘#searchFieldPage’).value = local.getItem(“searchTerm”);
$w(“#searchFieldPage”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
let searchstring = $w(“#searchFieldPage”).value;

    } 
});

})

4

Hi Matt,

When you click the search button, you apply a filter on the #dynamicDataset with this line of code:
filter($w(’ #searchFieldPage ').value);

The reason why the same doesn’t happen when you press enter, is because this same line of code is missing after " if (event.key === “Enter”) {".

Basically something like:

import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;
import {local} from ‘wix-storage’;

function filter(title) {
$w(‘#dynamicDataset’).setFilter(wixData.filter().contains(‘name’,title));
}

export function searchButtonPage_click(event) {
filter($w(‘#searchFieldPage’).value);
}

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”) {
$w(“#column5”).collapse();
$w(“#column5”).hide();
}

$w('#searchFieldPage').value = local.getItem("searchTerm"); 

$w("#searchFieldPage").onKeyPress((event, $w) => {

if (event.key === “Enter”) {
filter($w(‘#searchFieldPage’).value);
}
});
});

Michiel

5

Hi again,
That’s work perfect! for that page, Thanks.
I just need to apply the same sort of thing for the button on my header now,
I want to be able to press the search button or press enter and for it to link to the dynamic page and have inputed the data into the input on that page like if I press the search button.

then when the page loads instead of having to press the search button or enter on the input box on the dynamic page is it possible for it to have pressed the search button or enter upon load so the results are already displayed?

Almost there now!
This is the one last thing stopping me before launching the site!!

I really appreciate your help.
Here is the code I have for the ‘site’ code to be used for the header;

$w.onReady( function () {
$w(‘#searchButtonHeader’).onClick(() => {
const searchTerm = $w(‘#searchFieldHeader’).value
local.setItem(“searchTerm”, searchTerm);

});
})

$w(“#searchFieldHeader”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
filter($w(‘#searchFieldHeader’).value);
}
});

If you wish to look at my site you will understand what I want to do;
www.hyderoadretail.co.uk

Thanks so much,
Matt

6

Hi guys, I am currently having this same. Issue I’m not great at coding and don’t know much but trying my best to teach myself how to do thing. Below is the current code. Everything works fine but my search searches after I hit SPACE BAR. I want to be able to type with spaces then hit enter to search. HELP PLEASE!!!

import wixWindow from ‘wix-window’;
import { local } from ‘wix-storage’;
import wixLocation from ‘wix-location’;

$w.onReady( function () {

});

export function searchButton_click(event, $w) {
let word = $w(“#searchBar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/search-results);
}

export function searchBar_keyPress(event) {
let word = $w(“#searchBar”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/search-results);
}

7

Hi Matt,
Your Search bar is perfect! How did you do that?please

8

Hi Michiel

Could you pls guide me on where I add your enter key press code in my existing code?

$w.onReady( function () { $w(" #input1 “).onKeyPress((event, $w) => { if (event.key === “Enter”) { let searchstring = $w(” #input1 ").value; // Insert the same data query or link to dynamic page as your button is bound to here
}
});
});

This is how my code looks like.

773×390 12.5 KB

Thanks a lot!