Jump to content

How to add Search function to this?


Albeld

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!

Link to comment
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
Link to comment
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";

        }
    }
}

 

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
×
×
  • Create New...