Question

尝试通过按Enter键也进行搜索。该按钮可以使用，但是由于某种原因，我为按键输入的代码不起作用。 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

在：

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

您确定.btn-search是id属性吗？似乎是一个类属性。如果“ btn-search”不是该元素的ID，则无法使用getElementById获得该元素。

您不需要设置“。” getElementById上的（class）或“＃”（id）（getElementById仅是通过id获取元素，因此您无需告诉脚本所搜索的属性类型）。

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

Answer 3

确定您的大多数代码都正常工作

一些注意事项

使用查询选择器并调用类时，请在类名上加上句点'.search-btn'
使用 getElementById 时，请记住没有点'search-btn'
另外，我想我在几个地方添加了id，请确保在使用 getElementById 即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'>

通过按键盘上的Enter键进行搜索

3 个答案: