Is it possible to create a search system within a website with javascript and without database or php?
I want to create an HTML search system
Is it possible to create a search system within a website with javascript and without database or php?
I want to create an HTML search system
It is possible, however, you need to have a data source. It can be an array, a file with the data that will be used in the search.
And for this you can create using javascript and html.
Here's an example:
HTML
<table id="lista">
<thead>
<tr>
<th><div>Nome</div><div><input id="filtro-nome"/></div></th>
<th>Telefone</th>
<th>Ramal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>3333-3333</td>
<td>123</td>
</tr>
<tr>
<td>João</td>
<td>3333-3333</td>
<td>123</td>
</tr>
<tr>
<td>Luiz</td>
<td>3333-3333</td>
<td>123</td>
</tr>
<tr>
<td>Mário</td>
<td>3333-3333</td>
<td>123</td>
</tr>
<tr>
<td>Rodrigo</td>
<td>3333-3333</td>
<td>123</td>
</tr>
<tr>
<td>Silvana</td>
<td>3333-3333</td>
<td>123</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
}
table thead tr {
background-color: #ddd;
border-bottom: 2px solid #fff;
}
table th, table td {
padding: 2px 10px;
}
}
Javascript
var filtro = document.getElementById('filtro-nome');
var tabela = document.getElementById('lista');
filtro.onkeyup = function() {
var nomeFiltro = filtro.value;
for (var i = 1; i < tabela.rows.length; i++) {
var conteudoCelula = tabela.rows[i].cells[0].innerText;
var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
tabela.rows[i].style.display = corresponde ? '' : 'none';
}
};