How to filter and search multiple divs at once using Javascript?

Question

I have a very long list of items that I want users to be able to easily search through.

I was trying to implement this solution: https://www.w3schools.com/howto/howto_js_filter_lists.asp .

However, due to limitations within our CMS , I need to split this list into multiple divs. I currently have two divs with ids " s-lg-254 " and " s-lg-255 ", each containing a ul with ids " ul1 " and " ul2 ".

Here is the current code :

    function journalsearch(ulID) {
   // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('input1');
  filter = input.value.toUpperCase();
ul = document.getElementById(ulID);
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

And the HTML search box :

<input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles...">

The search box filters the first of the two lists as expected, but nothing I've tried has convinced it to filter the second at the same time.

I'm quite new to Javascript , so would appreciate any help!

Answer 1

One solution is to pass as many ids as you want, but reference them in a loop as arguments.

 function journalsearch() { // Declare variables var input, filter, ul, li, a, i, txtValue; input = document.getElementById('input1'); filter = input.value.toUpperCase(); for (var j=0; j < arguments.length; j++) { ulID = arguments[j]; ul = document.getElementById(ulID); li = ul.getElementsByTagName('li'); // Loop through all list items, and hide those who don't match the search query for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } } 

 <input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles..."> <ul id="ul2"></ul> <ul id="ul1"></ul> 

Answer 2

I would recommend collecting all list items into a single collection and iterating over it afterwards. In this way you would avoid nested loop.

 function journalsearch (firstList, secondList) { var listItemsSelector = [firstList, secondList].map(function (selector) { return '#' + selector + ' li'; }).join(', ') var listItems = document.querySelectorAll(listItemsSelector); var filter = document.getElementById('input1').value.toUpperCase(); Array.prototype.forEach.call(listItems, function (item) { var a = item.getElementsByTagName('a')[0] var txtValue = a.textContent || a.innerText item.style.display = (txtValue.toUpperCase().indexOf(filter) > -1) ? '' : 'none'; }) } 

 <input type="text" id="input1" onkeyup="journalsearch('ul1', 'ul2')" placeholder="Search for journal titles..."> <ul id="ul1"> <li><a>List 1, item 1</a></li> <li><a>List 1, item 2</a></li> </ul> <ul id="ul2"> <li><a>List 2, item 1</a></li> <li><a>List 2, item 2</a></li> </ul>