7

No meu trabalho, criei páginas como uma lista telefônica estática para facilitar a busca dos mesmos, porém como são muitos nomes, eu gostaria de criar um campo de pesquisa, porém não é possível fazer isso sem código dinâmico e banco de dados. É possível fazer isso com JavaScript com os dados salvos em um XML?.

O interesse não é segurança e nada, visto que é uma página pra facilitar a busca. Não uso o PHP porque na minha empresa não é permitida a instalação de programas (Apache, etc) nas máquinas. Minha dúvida é saber se é possível fazer isso com XML e JavaScript.

1
  • Eu deixaria os dados numa variável javascript mesmo, um num json. XML só vai complicar as coisas. Tendo os dados, a parte chata será lidar com caracteres acentuados na busca. Ver esta pergunta relacionada: pt.stackoverflow.com/questions/3994/…
    – bfavaretto
    Commented 8/03/2014 às 13:03

2 Respostas 2

12

Não é necessário ter nenhuma tecnologia no servidor. É perfeitamente possível fazer uma busca simples com Javascript.

Busca só com jQuery

Fiz um exemplo usando jQuery. A primeira coisa é ter uma tabela com os nomes e os telefones. No meu exemplo fiz assim:

<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 que coloquei um campo para busca no cabeçalho.

Com isso podemos fazer um script que executa quando o campo de filtro é alterado. Para cada linha ele verifica se o filtro corresponde com o nome e oculta ou exibe a linha conforme o caso. Considere o código abaixo:

$('#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


Busca só com Javascript "puro"

Como você não pode instalar um servidor, pode ser mais fácil distribuir o HTML sem nenhuma dependência. Pensando nisso, fiz uma versão que não depende de uma biblioteca como o 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

1

Obrigado à todos pelas informações! Com o conteúdo repassado, eu pude criar a seguinte estrutura:

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

...

E o javascript ficou assim:

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

Com isso, pude criar uma lista telefônica extensa com uma pesquisa. Muito obrigado!

3
  • Esse seu código é perfeito para o que eu preciso, só que tem um porém eu preciso disso com DIV e outras tags, tentei modificar o que vc fez, mas sem sucesso, tem como ajudar?
    – user4451
    Commented 9/03/2018 às 20:02
  • Olá, a ideia era pesquisar também pelo email? tentei usar o exemplo e a busca só funciona com o nome. Queria fazer a mesma pesquisa ora por nome ora por email. Agradeço se puder ajudar.
    – i9on i9on
    Commented 26/02/2019 às 18:52
  • Oi! Em tese, ele também funciona para email, mas apenas sendo feito pelo outro campo de texto que fiz nesse documento. Você queria apenas um campo de texto para consultar os dois? Commented 13/03/2019 às 11:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .