使用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> ：因此，“ content”一词将是您看不到的另一个“关键字”；

• 在函数中声明p变量

• p = li[i].getElementsByTagName("p")[0]; ，在a = li[i].getElementsByTagName("a")[0];
• 添加if语句： || p.innerHTML.toUpperCase().indexOf(filter) > -1 || 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组合#myUL > li > a模式立即选择它们。

另请注意，如果只需要获取文本，则应使用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则第二个li元素将保持可见）。

选项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：Map / WeakMap

另一种选择是创建一个映射，该映射将把单个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>