how to add live search filter in 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>