Merge several lists together and make them suggestions for search bar

Question

I want to merge several lists together and then take them as suggestions for an input field. I have a solution for one list but I cant get it to work with several lists. I get a nodelist and convert it into an array of HTMLUList elements. I think I need one big HTMLUlist ?! Thanks for the help I hope you understand my problem.

 let filter = this.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');
  

  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";
    }
  }
  // This works for one list "myUL"
  //-------------------------------------------------
  //This does not work 
  
  let filter = this.value.toUpperCase();
  ul = document.querySelectorAll (" #myUL , #myUL2 , #myUL3, #myUL4 , #myUL5 , #myUL6 ");
  var inputList = Array.prototype.slice.call(ul);
  li = inputList.getElementsByTagName('li'); 

Answer 1

Although your approach doesn't seem very effective for me, you can achieve by looping through ul elements:

 let filter = this.value.toUpperCase(); let uls = document.querySelectorAll('#myUL, #myUL2 ,#myUL3, #myUL4, #myUL5, #myUL6'); uls.forEach(ul => { let li = ul.getElementsByTagName('li'); // continue as above })