Static search list using Javascript instead of PHP

Question

In my work, I created pages as a static phone book to facilitate the search for them, but since there are many names, I would like to create a search field, but it is not possible to do this without dynamic code and database. You can do this with Javascript with data saved in an XML?.

The interest is not security and nothing, since it is a page to facilitate the search. I do not use PHP because in my company it is not allowed to install programs (Apache, etc) on the machines. My question is whether it is possible to do this with XML and Javascript.

Answer 1

It is not necessary to have any technology on the server. It is perfectly possible to do a simple search with Javascript.

Search only with jQuery

I made an example using jQuery. The first thing is to have a table with the names and the phones. In my example I did so:

<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>

Note that I have placed a search field in the header.

With this we can make a script that runs when the filter field is changed. For each line it checks whether the filter matches the name and hides or displays the line as appropriate. Consider the code below:

$('#filtro-nome').keyup(function() {
    var nomeFiltro = $(this).val().toLowerCase();
    $('table tbody').find('tr').each(function() {
        var conteudoCelula = $(this).find('td:first').text();
        var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
        $(this).css('display', corresponde ? '' : 'none');
    });
});

Demo no jsfiddle

---

Search only with Javascript "pure"

Since you can’t install a server, it can be easier to distribute HTML without any dependencies. Thinking about it, I made a version that doesn’t depend on a library like jQuery;

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

Demo no jsfiddle

Answer 2

Thanks to everyone for the information! With the content passed, I was able to create the following structure:

<table id="lista">
<thead>
    <tr>
        <th><div>Nome</div><div><input id="filtro-nome"/></div></th>
        <th>Telefone</th>
        <th>Ramal</th>
        <th>Celular</th>
        <th><div>Email</div><div><input id="filtro-email"/></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Não saber número</td>
        <td>9</td>
        <td>9</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr>
        <td>Ocupado</td>
        <td>6</td>
        <td>6</td>
        <td>-</td>
        <td>-</td>
    </tr>
    <tr>
        <td>TI - Sala Servidores - CPD</td>
        <td>*** ****-****</td>
        <td>****</td>
        <td>-</td>
        <td>-</td>
    </tr>

...

And the javascript was like this:

<script type="text/javascript">

window.onload=function(){

//para nomes
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';
    }
};

//para email
var filtro2 = document.getElementById('filtro-email');
var tabela2 = document.getElementById('lista');
filtro2.onkeyup = function() {
    var nomeFiltro = filtro2.value;
    for (var i = 1; i < tabela2.rows.length; i++) {
        var conteudoCelula = tabela2.rows[i].cells[0].innerText;
        var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
        tabela2.rows[i].style.display = corresponde ? '' : 'none';
    }
};

}

</script>

With this, I was able to create an extensive phone book with a search. Thank you very much!