How to capture Enter key press?

Discussion Ask a question
,
1

I had a user input for user to input keyword for searching. When they click the search button, it works properly when the user clicks the search button by mouse, but there is no response when the user presses the ENTER key.

What’s the code for Enter Key?
Any help would be greatly appreciated!

import {local} from ‘wix-storage’;

import wixLocation from ‘wix-location’;

$w.onReady( function () {

});

export function searchButton1_click_1() {

let word = $w(“#searchBar1”).value;

local.setItem("searchWord", word); 

wixLocation.to(`/results`);

}

1071×645 27.1 KB

1 Like
2 
$w("#searchBar").onKeyPress( (event) => {
if(event.key === "Enter"){


///Put here the code for action you want to execute

}
})
2 Likes
3

Many thanks!!

4

hi J.D.

Where in the code line do you add the enter key press code below?

$w("#searchBar").onKeyPress( (event) => {
if(event.key === "Enter"){

This is how my code looks like:

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

$w.onReady(function () {
});

export function vectorImage1_click(event) {

let word = $w(“#search1”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/hotelresultpage);

}

Hope to hear from you. Thanks!

5

You can do something like this:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';
function runSearch(){
 let word = $w("#search1").value;
 local.setItem("searchWord", word);
 wixLocation.to(`/hotelresultpage`);
}
$w.onReady(function () {
 $w("#search1").onKeyPress( (event) => {
  if(event.key === "Enter"){
  runSearch();
  }
 })
}); 
export function vectorImage1_click(event) { 
 runSearch();
}
6

Thank you so much for helping out. I have been struggling with this for months, as I am not a coder. When I delete the last export function in your code… it WORKS! So amazing… Your are much appreciated. Thank you thank you thank you :slight_smile:

7

Hi again

I would like to apply your code on 3 different search bars on the same page, how do I write/repeat the code? I have tried with the below code, but it doesn’t work. Hope that you can help again.

import { local } from ‘wix-storage’;
import wixLocation from ‘wix-location’;
function runSearch(){

let word = $w(“#search1”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/hotelresultpage);
}
$w.onReady( function () {
$w(“#search1”).onKeyPress( (event) => {
if(event.key === “Enter”){
runSearch();
}

let word = $w(“#search2”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/restaurantresultpage);
}
$w.onReady( function () {
$w(“#search2”).onKeyPress( (event) => {
if(event.key === “Enter”){
runSearch();
}

let word = $w(“#search3”).value;
local.setItem(“searchWord”, word);
wixLocation.to(/shoppingresultpage);
}
$w.onReady( function () {
$w(“#search3”).onKeyPress( (event) => {
if(event.key === “Enter”){
runSearch();
}
})
});

8

You can try:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';
let word;
function runSearch(searchNumber){
    word = $w("#" + searchNumber).value;
    local.setItem("searchWord", word);
    if(searchNumber === "search1") {
        wixLocation.to("/hotelresultpage");
    } else if (searchNumber === "search2"){
      wixLocation.to("/restaurantresultpage");
    } else if (searchNumber === "search3"){
        wixLocation.to("/shoppingresultpage");}
    }
$w.onReady(function () {
    $w("#search1, #search2, #search3").onKeyPress( (event) => {
        if(event.key === "Enter"){
            runSearch(event.target.id);
        }
    })
    $w("#vectorImage1, #vectorImage2, #vectorImage3").onClick((event) => {
        let targetId = event.target.id;
        let searchId = "search" + targetId[targetId.length -1];
        runSearch(searchId);
    })
});
9

Hi J. D.

You are amazing. It works!! You really just saved me and my project.

I have one last questions, I hope that you can help. This is a further search from the result page. How do I add the “enter key press” code in the below code. Hope that you can help me with the last one. Thank you!! :slight_smile:

import { local } from ‘wix-storage’;

import wixData from ‘wix-data’;

$w.onReady( function () {

var sameWord = local.getItem(“searchWord”);

$w("#searchBar1").value = sameWord; 

$w("#searchBar1").placeholder = sameWord; 

$w('#dataset1').onReady( **function**  () { 

    search(); 

});

});

export function searchButton_click(event) {
search();

}

function search() {

wixData.query('HotelResult') 

    .contains('name', $w("#searchBar1").value) 

    .or(wixData.query('HotelResult').contains('city', $w("#searchBar1").value)) 

    .find() 

    .then(res => { 

        $w('#repeater1').data = res.items; 

    });

}

10 
 //.....
$w('#datast1').onReady(function () { 
 search(); 
 $w("#searchBar1").onKeyPress ((event) => {
  if(event.key === "Enter"){search();}
  })
}); 
//.....
11

Hi J.D.

I have tried to add your code as below, but it doesn’t work. Do you know what is wrong?

637×716 26.1 KB

12

You’re missing }) before the export function

13

It works!!! I am soooo happy for your help. Thank you so much.

14

hi, i used the code and it works perfectly but when i tried it on my search results page it deosnt work, please help

here is the code

import {local} from ‘wix-storage’;
import wixData from ‘wix-data’;
$w.onReady( function () {
var sameWord = local.getItem(“searchWord”);
$w(“#searchBar1”).value = sameWord;
$w(“#searchBar1”).placeholder = sameWord;
$w(‘#profileSearch’).onReady( function () {
search();
});
});
export function searchButton1_click() {
search();
}
function search() {
wixData.query(‘UserProfileData’)
.contains(‘fullName’, $w(“#searchBar1”).value)
.or(wixData.query(‘UserProfileData’).eq(‘updatedProfileTitle’, $w(“#searchBar1”).value))
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
});
}

15

Try moving the following lines into the dataset,onReady() function before you call the function:

$w.onReady(function () {
$w('#profileSearch').onReady(function () {
//put the lines here, and not above:
    var sameWord = local.getItem("searchWord");
    $w("#searchBar1").value = sameWord;
    $w("#searchBar1").placeholder = sameWord;
    search();
    });
});