5

Estive procurando na internet mas não consegui encontrar nenhuma referências, talvez pelo fato de eu estar pesquisando errado, por isso recorri a criar este post.

Tenho uma consulta no banco de dados (MySql com PHP) que me retorna uma listagem de produtos com diversas características (nome, valor, categoria, tipo, composição, etc), e esta listagem é mostrada para o usuário na tela.

No lado esquerdo temos filtros, que são estas caracteristicas dos produtos listados inicialmente, gostaria que:

1 - o usuário ao selecionar um filtro, o resultado da busca seja refeito levando em consideração aquele filtro selecionado, MAS SEM IR BUSCAR AS INFORMAÇÕES NOVAMENTE NO BANCO DE DADOS, ou seja, trabalhar com o resultado que já está na tela do usuário.

Sei que para isto seja necessário criar um objeto JSON e manipular as informações que estão dentro dele, conforme os filtros que são selecionados, mas converter o resultado od PHP para o objeto do JSON sem problemas (json_enconde / json_decode), mas o problema é como pesquisar dentro deste objeto de forma a mostrar os resultados com filtros.

Não quero buscar as informações novamente no banco de dados porque caso isso aconteça, terei muitas consultas e o tempo de resposta pode ser elevado para o usuário.

Se alguém tiver alguma luz par ame ajudar, ou já tenha feito algum código semelhante e puder me ajudar agradeço.

Obrigado a todos

1
  • Conseguiste pôr isto a funcionar?
    – Sergio
    Commented 28/05/2015 às 18:35

1 Resposta 1

4

Isso dá para fazer de maneiras diferentes. Deixo aqui um exemplo:

var restaurants = [{"name": "McDonald's"}, { "name": "KFC" }, { "name": "Pizza Hut" }, { "name": "Dominos" }, { "name": "Popeyes" }];

function mostrar(arr) {
    var lista = $('#lista'); // coloquei em cache aqui para não ter $('#lista').append() dentro do loop
    lista.html(''); // para limpar antes de voltar a colocar a lista

    arr.forEach(function (rest) {
        lista.append('<div>' + rest.name + '</div>');
    });
}
$('#busca').on('keyup', function () {
    var busca = this.value;
    var filtrados = restaurants.filter(function (rest) {
        return rest.name.toLowerCase().indexOf(busca) != -1;
    });
     mostrar(filtrados);
});
mostrar(restaurants); // para iniciar
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Escreva uma letra de um dos nomes para filtrar...

<input type="text" id="busca" />
<div id="lista"></div>

Este código procura o keyup para detectar input do utilizador. Podia ser um clic numa div também. Depois compara o valor do input com todos os objetos do array e retira os que não têm aquela letra/palavra no nome. Ai chama a função para mostrar os resultados passando a array já filtrada.

7
  • como faco para colocar em um select:open abaixo do input??
    – raddx
    Commented 27/05/2015 às 14:27
  • @RafaelVergoPolan coloca uma pergunta nova com o código que tens e o problema para ajudarmos a resolver.
    – Sergio
    Commented 27/05/2015 às 14:51
  • cara, este código é perfeito, o mais legal que já vi até agora, porém, não estou encontrando uma forma de não exibir nada quando não tiver nada escrito no imput, se eu remover o mostrar(restaurants); ele não exibe nada até escrever algo, porém, não oculta a lista quando apaga tudo, poderia me ajudar?
    – flourigh
    Commented 3/03/2016 às 16:53
  • @flourigh queres a mesma funcionalidade mas sem mostrar as opções que há? é isso?
    – Sergio
    Commented 3/03/2016 às 17:14
  • 1
    @flourigh então como já tiraste o mostrar que está na ultima linha junta if(!busca) return mostrar([]); depois da linha var busca = this.value; para ele retornar uma array vazia. Se não conseguires ainda faz uma pergunta nova com o problema específico que alguém vai certamente ajudar. Boa sorte!
    – Sergio
    Commented 3/03/2016 às 19:11

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 .