Albeld Posted January 19, 2018 Share Posted January 19, 2018 Hi everyone, I've found this Filter Elements and need a simple search function for this. Could anyone help me? I got a script already from another example but couldn't get it working. function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); 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"; } } } Thanks in advance! Link to comment Share on other sites More sharing options...
Ingolme Posted January 19, 2018 Share Posted January 19, 2018 Is your Javascript code accessing existing elements on the page? Link to comment Share on other sites More sharing options...
Albeld Posted January 19, 2018 Author Share Posted January 19, 2018 (edited) Yes, it is. I got more into it and managed it to filter my div's. Now I need to get it filtered from what is in the class and not from the text. Something like 'get elements from class'. Here my current code: $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#container div").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); This is how it filters from the text (p, a, etc.) Edited January 19, 2018 by Albeld Link to comment Share on other sites More sharing options...
Albeld Posted January 21, 2018 Author Share Posted January 21, 2018 nobody can help? Link to comment Share on other sites More sharing options...
Ingolme Posted January 22, 2018 Share Posted January 22, 2018 You just changed your code from Javascript to jQuery, the impression I got was that you had found a jQuery solution. To make the original code work for class attributes instead of content, just replace innerHTML for className. function search() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.className.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } 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