Is it possible to create an internal search of a site without using PHP and database?

2

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

    
asked by anonymous 02.06.2017 / 01:47

1 answer

0

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';
    }
};
    
24.12.2018 / 17:06