Search by pressing the enter key on keyboard

Question

Trying to also search by pressing enter key. Works with the button but for some reason the code i have for the key press is not working. Javascript:

function displayMatches() {
         const searchText = document.querySelector('.search').value;
        const matchArray = findMatches(searchText, name);  
        const html = matchArray.map(place => {
            const regex = new RegExp(searchText);
            const nameName = place.name.replace(regex, `<span class="hl">${searchText}</span>`);
            return `
            <a href="${place.url}" target="_blank">
                <li>
                    <span class="name">${nameName} <br> ${(place.price)}</span> 
                    <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">
                </li>
            </a>
            `;
        }).join('');
        suggestions.innerHTML = html;
    }



const suggestions = document.querySelector('.suggestions');

const searchBtn = document.querySelector('.btn-search');
searchBtn.addEventListener('click', displayMatches);

var input = document.getElementById('.search');
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById('.btn-search').click();
  }
});

Why are you not calling the the `displayMatches` function inside the keyup event handler instead of programmatically clicking the button? You might want to include your HTML so we can see what your `.search` element is. — Emiel Zuurbier, Jan 04 '20 at 23:21
Does this answer your question? [execute function on enter key](https://stackoverflow.com/questions/16011312/execute-function-on-enter-key) It uses keydown instead of keyup. — Robert Harvey, Jan 04 '20 at 23:21
You're searching for elements with `id=".search"` and `id=".btn-search"`. Is this what you intend? This looks like you're thinking you're searching for a class name. — PaulProgrammer, Jan 04 '20 at 23:22

score 1 · Answer 1 · answered Jan 04 '20 at 23:22

In:

document.getElementById('.btn-search').click();

Are you sure .btn-search is a id property? Seems like a class property. You cannot get the element with getElementById if the "btn-search" isn't the id of the element.

And you don't need to set "." (class) or "#" (id) on the getElementById (getElementById it's only to get elements by id, so you don't need to tell the script the property type you searching).

score 1 · Answer 2 · answered Jan 04 '20 at 23:55

1

As the user William Carneiro stated, the issue is the . character.

The function getElementById just receive the id, not a selector. Check documentation

Change this line:

var input = document.getElementById('.search');

With something like this:

var input = document.getElementById('search');

... or this:

var input = document.querySelector('#search');

Also, make sure that your element has id="search", it seems that probably you want to find an element with the class search instead.

var input = document.querySelector('.search');

answered Jan 04 '20 at 23:55

Xotl

99
8

Which one you tried?... also confirm that there's no other elements with the same id. Anyway, are you sure that you're no looking for a class instead of an id? and if theres only one element with that class/id. You can put a breakpoint on that line and confirm that the element retrieved (if any) is the one that you expect. – Xotl Jan 05 '20 at 00:54

score 0 · Accepted Answer · edited Jan 05 '20 at 18:09

0

I found this and I think it can helped you

JavaScript:

function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {
    // 27 is the ESC key
    alert ("You pressed the Escape key!");
  }
}

edited Jan 05 '20 at 18:09

Shiny

4,945
3
17
33

answered Jan 04 '20 at 23:27

Raphael Reynaud

8

JonoJames · Answer 4 · 2020-01-04T23:49:09.340

Ok most of your code was working

A few things to note

When using query selector and calling a class use the class name with the dot'.search-btn'
When using getElementById remember there is no Dot 'search-btn'
Also I think I added an id in few places make sure your html tags have Id attributes to them before using getElementById i.e class='search-btn' id='search-btn' ...>

Other than that your code works

function displayMatches() {
         const searchText = document.querySelector('.search').value;
         // the rest of your code here
          console.log("enter Worked Searching" );
    }



const suggestions = document.querySelector('.suggestions');

const searchBtn = document.querySelector('.btn-search');
searchBtn.addEventListener('click', displayMatches);

var input = document.getElementById('search');
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById('btn-search').click();
  }
});

<input class="search" id = 'search'type="text" placeholder="Search Deals">
<input type='button' class='btn-search' value='search' id ='btn-search'>

This does not work. Feel like when i press enter it refreshes the page — valeriu7474, Jan 05 '20 at 00:20

Search by pressing the enter key on keyboard

4 Answers4