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

Asked

Viewed 484 times

3

It is possible to create a search system inside a site with javascript and no database or php?

I want to create an HTML search system

javascript html5

  • If all the data is already in the DOM, yes.

  • ne explains better, where can I find something that talks about this subject, or what is the name of this method.

  • from a glance at Angularjs, this is very simple to do if you are using a frontend with agularJS.

  • 1

    Yes, I created this, it’s html and javascript normal https://github.com/hatatori/search-engine-system

  • You can create a dynamic search on the same page (without refresh), using JS neatly quietly, take a look at this example from W3 Schools https://www.w3schools.com/howto/js_filter_lists.asp

1 answer

1

It is possible yes, 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 that you can create using javascript and html.

Follow 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';
    }
};

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.