Jump to content
Sign in to follow this  
Albeld

How to add Search function to this?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Is your Javascript code accessing existing elements on the page?

Share this post


Link to post
Share on other sites

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 by Albeld

Share this post


Link to post
Share on other sites

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";

        }
    }
}

 

Share this post


Link to post
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
Sign in to follow this  

×