Good evening, my doubt is as follows. I am doing a user page for a system of fines and I have already made my connection to the database, the question is that it shows me the full user table but I would like to add to that view, the possibility of searching in real time , is to say that I'm filtering from that result as I go typing letters.
Greetings !!
Maria
I will give an example of how to do (then adapt it to your site)
We will use the keyup (JQuery) event that will be launched when the user releases a key within input con id entradafilter ,
Later we created a Regular Expression Object using RegExp as parameters we send the value of the input and a i which means (will not distinguish between uppercase and lowercase)
We hide all the rows of the table with the effect hide (hide) , we filter the rows with filter using the regular Expression Object created earlier. to finally show that row using the show .
effect
$(document).ready(function () {
$('#entradafilter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.contenidobusqueda tr').hide();
$('.contenidobusqueda tr').filter(function () {
return rex.test($(this).text());
}).show();
})
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filtrado</span>
<input id="entradafilter" type="text" class="form-control">
</div>
<table class="table table-striped">
<thead>
<tr>
<th>CODIGO</th>
<th>NOMBRE</th>
</tr>
</thead>
<tbody class="contenidobusqueda">
<tr>
<td>123456</td>
<td>Felipe</td>
</tr>
<tr>
<td>987654</td>
<td>María</td>
</tr>
<tr>
<td>565424</td>
<td>Pedro</td>
</tr>
<tr>
<td>112322</td>
<td>Milagros</td>
</tr>
</tbody>
</table>