É possivel criar um sistema de pesquisa dentro de um site com javascript e sem banco de dados nem php?
Quero criar um sistema de pesquisa em HTML
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeÉ possivel criar um sistema de pesquisa dentro de um site com javascript e sem banco de dados nem php?
Quero criar um sistema de pesquisa em HTML
É possível sim, no entanto, você precisa ter uma fonte de dados. Pode ser um array, um arquivo com os dados que serão usados na busca.
E para tal vcoẽ pode criar usando javascript e html.
Segue um exemplo:
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';
}
};