使用JavaScript过滤标签的搜索属性

Question

我有一个带有搜索框的图片库。 当我在搜索框中键入内容时，我希望在data-title属性（ 即 “ A Great view of fields ”）上而不是在alt属性上进行搜索。 下面的代码有效，但是它在标记的innerHTML上搜索，而不是在data-title属性上搜索，如何使它仅在特定属性上搜索。

 function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("gallery"); 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"; } } } 

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name"> <ul id="gallery"> <li> <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> </li> <li> <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> </li> <li> <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> </li> 

Answer 1

您可以使用.getAttribute()函数对特定属性进行过滤，该函数返回该属性的值，在这种情况下，您使用a.getAttribute("data-title").toUpperCase() ，然后按该示例过滤结果：

 function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("gallery"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.getAttribute("data-title").toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } myFunction() 

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name" value="cow"> <ul id="gallery"> <li> <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> </li> <li> <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> </li> <li> <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> </li> <li> <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> </li> <li> <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> </li> 

希望这可以帮助！

Answer 2

因为您在HTML源代码中对onkeyup事件进行了硬编码，所以建议您添加以下两个参数：

• 这：当前元素
• 事件：事件对象

更改自：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name">

至：

<input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for caption" title="Type in a name">

这样，您的函数将接收两个参数，您可以利用以下两个参数：

 function myFunction(ele, evt) { // // get current input value // var filter = ele.value.toUpperCase(); // // for each anchor under an li belongint to gallery.... // document.querySelectorAll("#gallery li a").forEach(function(ele, idx) { // // get the title data attribute // var title = ele.dataset.title.toUpperCase(); // // set the display style // ele.parentNode.style.display = (title.indexOf(filter) == -1) ? "none" : ""; }) } 

 <input type="text" id="myInput" onkeyup="myFunction(this, event)" placeholder="Search for caption" title="Type in a name"> <ul id="gallery"> <li> <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"> <img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a> </li> <li> <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"> <img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a> </li> <li> <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."> <img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a> </li> </ul>