Question

问题

我在Javascript中进行了“预先输入”搜索功能，该功能返回的结果与您输入的内容相匹配。搜索结果将作为列表项（带有链接）返回并添加到DOM中，但是这些链接在第一次单击时不会打开，并且当我测试记录您输入的元素的mouseenter eventlistener函数时，这些链接未显示这页纸。我以为问题可能出在z-index上，但是我将'li'和'a'都设置为更高的索引，但这没有帮助。

const arr = ['pink', 'blue', 'green', 'purple'];

function findMatches(wordToMatch, arr) {
  return arr.filter(item => {
    const regex = new RegExp(wordToMatch, 'gi');
    return item.match(regex);
  });
}

function displayArr() {
  const matchArray = findMatches(this.value, arr)
  const html = matchArray.map(item => {
    const regex = new RegExp(this.value, 'gi');
    const itemName = item.replace(regex, `<span class='hl'>${this.value}</span>`);
    return `
      <li>
       <span class='name'>${itemName}</span>
      </li>
      `;
  }).join('');
  suggestions.innerHTML = html;
}

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('keyup', displayArr);

//check for element
const all = document.querySelectorAll('a, ul, li, span, form, input');

function logElement(e) {
  console.log(e.target);
}

all.forEach(a => a.addEventListener('mouseenter', logElement));

<form class="search-form">
  <input type="text" class="search" placeholder="Search">
  <ul class="suggestions"></ul>
</form>

您将看到，可以获取的最低元素是'ul'，我不确定这是CSS还是JS问题。预先感谢您的帮助。

无法访问添加到DOM的列表项/链接

0 个答案: