Jump to content

Filter multiple lists


nomarie
 Share

Recommended Posts

Like with the other Javascript examples, they typically use IDs for everything.  Since IDs need to be unique, you need a different way to access the elements in Javascript.  One option would be to pass the IDs of the text field and the UL list to the function instead of hard-coding  that in the function.  

Link to comment
Share on other sites

You probably only need to pass the relevant IDs to the function.

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

 

Link to comment
Share on other sites

I've got two ULs with IDs 'ul1' and 'ul2'.

JS:

function journalsearch() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById('ul1','ul2');
  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.getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li.style.display = "";
    } else {
      li.style.display = "none";
    }
  }
}

Search box:

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

Search filters the first list as expected, but nothing happens to the second.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...