Filter search attribute of tag using JavaScript

Question

I have an image gallery with a search box. When I type in the search box I want the search to be made on the data-title attribute specifically ie " A Great view of fields " and not on the alt attribute. The code below works but it searches on the innerHTML of the tag and not the data-title attribute specifically, how do I make it search on the specific attribute only.

 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

You can filter on a specific attribute by using the .getAttribute() function which returns the value of that attribute in this case you use a.getAttribute("data-title").toUpperCase() , then filter the results by that, example:

 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> 

Hope this helps!

Answer 2

Because you hardcoded in the HTML source the onkeyup event, I'd suggest you to add the following two parameters:

• this: current element
• event: the event object

Change from:

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

to:

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

In this way your function will receive the two arguments and you can take advantage o those:

 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>