Knowledge is Here...: Create Search TextBox on Webpage

Saturday, December 5, 2020

Create Search TextBox on Webpage

I have used this search textBox to search from the table, it can search any text (entered in text box) from the whole table and table will show only those rows where ever searched keyword found.

Once can modify the code as per their requirement.

Add below code in your header tab of html/xml code. Actual code is in "script" tag which is handling this implementation.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#ListAllPost tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 4px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>
Filter Posts</h2>
<input id="myInput" placeholder="Search.." type="text" />
<table><thead>
<tr> <th style="width: 10%;"> Full Name </th> <th style="width: 45%;">Comment</th> <th style="width: 45%;">Place</th> </tr>
</thead> <tbody id="ListAllPost">
<tr><td>Gurjeet Singh</td> <td><a href="http://j4info.blogspot.com/p/blog-page_14.html">Enter any text in your text Box</td> <td>Click on the link to see the implementation</td> </tr>
<tr><td>J4Info</td> <td><a href="http://j4info.blogspot.com/p/blog-page_14.html">Entered text will look from this table rows and accordingly show only that rows where ever searched keyword found.</a></td><td>Click on the link to see the implementation</td> </tr>
</tbody></table>
</body></html>
</div>

Use this code for