用于搜索元素的 JavaScript 函数

Question

我有一个搜索栏和一个无序列表。

<input onkeyup="Cautare()" type='text' id='userInput' placeholder='Cautare...'>
<button class="Buton" id='Trimitere' onclick="TrimitereWikipedia()">Cautare Wikipedia</button>
<br />
<ul id="myUL">
  <li><a href="Istoria_Opticii.html">ISTORIA OPTICII</a></li>
  <li><a href="Principiile_Opticii_Geometrice.html">PRINCIPIILE OPTICII GEOMETRICE</a></li>
</ul>

使用这个 JS 函数（Cautare()）：

function Cautare() {
var input, filter, ul, li, a, i;
input = document.getElementById("userInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}}

所以这个函数基本上从<li> 中搜索<a> 标签内的内容 我想通过这样做让这个脚本有点搜索内容的内容：

• 添加<p style="display: none">content</p>：因此“内容”一词将是您看不到的另一个“关键字”；

• 在函数中声明p变量

• p = li[i].getElementsByTagName("p")[0];，在a = li[i].getElementsByTagName("a")[0]; 下
• 在if语句中添加：|| p.innerHTML.toUpperCase().indexOf(filter) > -1

因此，当我在搜索栏中输入“内容”一词时，应该会出现第一个列表项，但没有发生任何事情，实际上所有这些都破坏了功能。

如何编辑函数以便完成我想做的事情？我对 JavaScript 不是很有经验。

Answer 1

选项 1：数据属性

您可以使用data attributes 来存储该附加关键字。 <a href="Istoria_Opticii.html" data-keyword="content"> 之类的东西，然后您可以使用 element.dataset.keyword 获取该关键字。

请注意，如果您想选择那些 a 元素，并且您持有对它们的父元素的引用，那么您需要做的就是请求 firstChild。更好的是，只需使用#myUL > li > a 模式结合querySelectorAll 立即选择它们。

另请注意，如果您只需要获取文本，则应使用textContent 而不是innerHTML。

function Cautare() {
  const inputValue = document.getElementById('userInput').value.toUpperCase();
  const items = [...document.querySelectorAll('#myUL > li > a')];

  items.forEach(item => {
    if (item.textContent.toUpperCase().includes(inputValue) ||
        item.dataset.keyword.toUpperCase().includes(inputValue)) {
      item.parentElement.style.display = '';
    } else {
      item.parentElement.style.display = 'none';
    }
  });
}

<input onkeyup="Cautare()" type='text' id='userInput' placeholder='Cautare...'>
<!-- <button class="Buton" id='Trimitere' onclick="TrimitereWikipedia()">Cautare Wikipedia</button> -->
<br />
<ul id="myUL">
  <li><a href="Istoria_Opticii.html" data-keyword="content">ISTORIA OPTICII</a></li>
  <li><a href="Principiile_Opticii_Geometrice.html" data-keyword="somethingElse">PRINCIPIILE OPTICII GEOMETRICE</a></li>
</ul>

现在，如果您开始输入单词 content，第一个 li 元素将保持可见（如果您开始输入 somethingelse，第二个元素将保持可见）。

选项 2：隐藏元素

如果您愿意，可以按照您描述的方式使用隐藏元素。下面的片段显示了如何以您提到的方式使用隐藏的 p 元素。

function Cautare() {
  const inputValue = document.getElementById('userInput').value.toUpperCase();
  const items = [...document.querySelectorAll('#myUL > li')];

  items.forEach(item => {
    const aElem = item.querySelector('a');
    const pElem = item.querySelector('p');

    if (aElem.textContent.toUpperCase().includes(inputValue) ||
        pElem.textContent.toUpperCase().includes(inputValue)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
}

<input onkeyup="Cautare()" type='text' id='userInput' placeholder='Cautare...'>
<!-- <button class="Buton" id='Trimitere' onclick="TrimitereWikipedia()">Cautare Wikipedia</button> -->
<br />

<ul id="myUL">
  <li>
    <p style="display: none">content</p>
    <a href="Istoria_Opticii.html">ISTORIA OPTICII</a>
  </li>
  <li>
    <p style="display: none">somethingElse</p>
    <a href="Principiile_Opticii_Geometrice.html">PRINCIPIILE OPTICII GEOMETRICE</a>
  </li>
</ul>

选项 3：地图/弱地图

另一种选择是创建一个映射，将单个 li 元素作为键，并将与它们关联的关键字作为值。

function Cautare() {
  const inputValue = document.getElementById('userInput').value.toUpperCase();
  const items = [...document.querySelectorAll('li')];
  const keywords = new WeakMap([[items[0], 'content'], [items[1], 'somethingElse']]);

  items.forEach(item => {
    if (item.firstChild.textContent.toUpperCase().includes(inputValue) ||
        keywords.get(item).toUpperCase().includes(inputValue)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
}

<input onkeyup="Cautare()" type='text' id='userInput' placeholder='Cautare...'>
<!-- <button class="Buton" id='Trimitere' onclick="TrimitereWikipedia()">Cautare Wikipedia</button> -->
<br />

<ul id="myUL">
  <li><a href="Istoria_Opticii.html">ISTORIA OPTICII</a></li>
  <li><a href="Principiile_Opticii_Geometrice.html">PRINCIPIILE OPTICII GEOMETRICE</a></li>
</ul>

如果您将给定项目的关键字和文本内容都存储在地图中，则可以进一步简化此方法。在这种情况下，您只需要检查一个条件。

function Cautare() {
  const inputValue = document.getElementById('userInput').value.toUpperCase();
  const items = [...document.querySelectorAll('li')];
  const keywords = new WeakMap([[items[0], 'content, ISTORIA OPTICII'],
                                [items[1], 'somethingElse, PRINCIPIILE OPTICII GEOMETRICE']]);
                                
  items.forEach(item => {
    keywords.get(item).toUpperCase().includes(inputValue) ?
      item.style.display = '' :
      item.style.display = 'none';
  });
}

<input onkeyup="Cautare()" type='text' id='userInput' placeholder='Cautare...'>
<!-- <button class="Buton" id='Trimitere' onclick="TrimitereWikipedia()">Cautare Wikipedia</button> -->
<br />

<ul id="myUL">
  <li><a href="Istoria_Opticii.html">ISTORIA OPTICII</a></li>
  <li><a href="Principiile_Opticii_Geometrice.html">PRINCIPIILE OPTICII GEOMETRICE</a></li>
</ul>