serch filter javascript code example

Example 1: search functionality for html table

BY LOVE SINGH,
Call this function onKeyUp event of TEXTBOX.

function myFunction() {
            var input, filter, table, tr, td, i;
            input = document.getElementById("TextBoxID");
            filter = input.value.toUpperCase();
            table = document.getElementById("TableID");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[1];
                var x = $("#TextBoxID").val();
                var regex = /^[a-zA-Z]+$/;
                if (!x.match(regex)) {
                    td = tr[i].getElementsByTagName("td")[0];
                }
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }

Example 2: js filter text

<script>
    $('input[name="search_field"]').on("keyup", function() {
        filtrate($(this).val().toLowerCase());
    });

    function filtrate(searched) {
        $(".filter-key > h3").filter(function() {
            var isHidden = ($(this).text().toLowerCase().indexOf(searched) > -1) ? 'block' : 'none';
            $('.filter-key').css('display', isHidden);
        });
    }
</script>