通过按键盘上的 enter 键进行搜索答案

【问题标题】：Search by pressing the enter key on keyboard通过按键盘上的 enter 键进行搜索
【发布时间】：2020-01-04 23:15:13
【问题描述】：

尝试按回车键进行搜索。与按钮一起使用，但由于某种原因，我的按键代码不起作用。 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();
  }
});

【问题讨论】：

你的keyup事件监听器触发了吗？
为什么不调用 keyup 事件处理程序中的 displayMatches 函数，而是以编程方式单击按钮？您可能想要包含您的 HTML，以便我们可以看到您的 .search 元素是什么。
这能回答你的问题吗？ execute function on enter key 它使用 keydown 而不是 keyup。
您正在搜索带有id=".search" 和id=".btn-search" 的元素。这是你的意图吗？这看起来像你在想你正在搜索一个类名。
你有一些 html 吗

标签： javascript html button

【解决方案1】：

在：

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

您确定 .btn-search 是 id 属性吗？看起来像一个类属性。如果“btn-search”不是元素的 id，则无法使用 getElementById 获取元素。

而且你不需要设置“。” getElementById 上的 (class) 或 "#" (id)（getElementById 只是通过 id 获取元素，因此您不需要告诉脚本您搜索的属性类型）。

【讨论】：

【解决方案2】：

正如用户William Carneiro 所说，问题在于. 字符。

getElementById 函数只接收 id，而不是选择器。 Check documentation

改变这一行：

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

这样的：

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

...或者这个：

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

另外，请确保您的元素具有id="search"，看来您可能希望使用类搜索来查找元素。

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

【讨论】：

您尝试了哪一个？...同时确认没有其他具有相同id的元素。无论如何，您确定您不是在寻找课程而不是 id 吗？如果只有一个元素具有该类/ID。您可以在该行上放置一个断点并确认检索到的元素（如果有）是您所期望的。

【解决方案3】：

我找到了这个，我认为它可以帮助你

JavaScript：

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

【讨论】：

【解决方案4】：

好的，你的大部分代码都在工作

注意事项

使用 查询选择器 并调用类时，请使用带点'.search-btn' 的类名
使用 getElementById 时请记住没有点 'search-btn'
另外我想我在几个地方添加了一个 id 确保你的 html 标签在使用 getElementById 之前对它们有 Id 属性，即class='search-btn' id='search-btn' ...>

除了你的代码有效

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

【讨论】：

这不起作用。感觉当我按下回车时它会刷新页面