Я пытаюсь выполнить поиск в адресной книге, созданной в JS и jQuery и перепробовал большинство доступных опций шаблона для фильтрации tbody и tr через ниже ready () поиска, но это не работает, не могли бы вы взглянуть и сообщить мне, где я иду не так. Ниже мой html и JS код, я работаю в repl.it Спасибо.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Address Book</h1>
<hr />
</header>
<table id='table1' class="table">
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>
<input id='firstName' class='form-control' type="text" placeholder ='Name'>
</td>
<td>
<input id='lastName' class='form-control' type="text" placeholder ='Surname'>
</td>
<td>
<input id='phone' class='form-control' type="text" placeholder ='Contact Number'>
</td>
<td>
<input id='address' class='form-control' type="text" placeholder ='Full Postal Address'>
</td>
<td>
<div class="text-center">
<button id='add' class='btn btn-block' >Add</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
JS КОД
var adBook = (function () {
// default fields for understanding
var pplDetails = [{
firstName: 'Sam',
lastName: 'Smith',
phone: '004477995544',
address: '33 jump st, London'
}];
//variables declaration
var table = $('#table1');
var $tbody = table.find('tbody');
var $firstName = table.find('#firstName');
var $lastName = table.find('#lastName');
var $phone = table.find('#phone');
var $address = table.find('#address');
var $button = table.find('#add');
var $btnRemove = table.find('#remove');
var $input = table.find(".edit");
//events calls
$button.on('click', adPerson);
table.on('click', '#remove', delPerson);
console.log($input);
build();
//function to create new table data
function build() {
$tbody.html('');
var length = pplDetails.length;
for (var i = 0; i < length; i++) {
table.prepend('<tr><td><input type="text" value="' + pplDetails[i].firstName + '" ></td> <td><input type="text" value="' + pplDetails[i].lastName + '" ></td> <td><input type="text" value="' + pplDetails[i].phone + '" ></td> <td><input type="text" value="' + pplDetails[i].address + '" ></td> <td> <button id="remove" class="btn btn-block">Del</button></td></tr>');
}
}
//function to add persons details
function adPerson() {
var data = {
firstName: $firstName.val(),
lastName: $lastName.val(),
phone: $phone.val(),
address: $address.val()
};
pplDetails.push(data);
$firstName.val('');
$lastName.val('');
$phone.val('');
build()
}
//function to delete details
function delPerson(event) {
var element = event.target.closest('tr');
var i = table.find('td').index(element);
pplDetails.splice(i, 1);
build();
}
return {
adPerson: adPerson,
delPerson: delPerson
};
})();
//Search bar
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$('tbody tr').filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});