按键盘上的回车键搜索

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

Answer 1

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).

Answer 2

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');

Answer 3

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!");
  }
}

Answer 4

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 ie 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'>