nomarie Posted December 20, 2018 Share Posted December 20, 2018 I'm basically trying to replicate https://www.w3schools.com/howto/howto_js_filter_lists.asp but with multiple ULs rather than a single one. I've had no problem with the HTML/CSS adaptations, but am stuck on the JS. Can anyone help? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 20, 2018 Share Posted December 20, 2018 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 More sharing options...
nomarie Posted December 20, 2018 Author Share Posted December 20, 2018 I had thought about using a class rather than ID but am not sure how to approach that. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 20, 2018 Share Posted December 20, 2018 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 More sharing options...
nomarie Posted December 21, 2018 Author Share Posted December 21, 2018 Doesn't seem to be working for me - do any changes need to be made to the original for loop? Link to comment Share on other sites More sharing options...
justsomeguy Posted December 21, 2018 Share Posted December 21, 2018 I don't think so, but when you call the function you need to pass the appropriate IDs to it. Link to comment Share on other sites More sharing options...
nomarie Posted December 21, 2018 Author Share Posted December 21, 2018 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 More sharing options...
justsomeguy Posted December 21, 2018 Share Posted December 21, 2018 document.getElementById only returns one element, trying to pass more than one value to it has no effect. Notice what I did in the post above, I replaced the IDs in the function with variables. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now