Dynamic search with Javascript and JSON

Question

Good morning Friends, I’m trying to do a dynamic research but I’m not getting, I’ve done everything for when to put a word in input do the research but nothing happens.

Products appear but search does not work.

Code of controller.js

var json = {

  0: {link: '#', imagem: 'img/pizza1.png', titulo: 'calabresa1', descricao: 'queijo', marca: 'super'},
  1: {link: '#', imagem: 'img/pizza1.png', titulo: 'calabreza2', descricao: 'picles', marca: 'pequena'},
  2: {link: '#', imagem: 'img/pizza1.png', titulo: 'calabreza3', descricao: 'tomate', marca: 'media'},
  3: {link: '#', imagem: 'img/pizza1.png', titulo: 'calabreza4', descricao: 'pimentao', marca: 'grande'},
};

$(document).ready(function() {

  $('#saidaTxt').html("");
  listaItens(json);

  $('#search').bind('input', function() {
    busca = $(this).val().toLowerCase();

    var keyTeste = null;
    if (busca !== '') {
        var corresponde = false;
        var saida = array();
        var quantidade = 0;
        for (var key in json) {
            var aux = json[key];
            for (var key2 in aux) {
                corresponde = aux[key2].toLowerCase().indexOf(busca) >= 0;
                if (corresponde) {
                    if (keyTeste != key) {
                        saida.push(json[key]);
                        quantidade += 1;
                        keyTeste = key;
                    }
                }
            }
        }

        if (quantidade) {
            $('#saidaTxt').text('');
            $('#quantidade').html(quantidade + 'resultado!<br><br>');
            listaItens(saida);
        } else {
            $('#quantidade').html('Nenhum Resultado');
            $('#saidaTxt').text('');
            listaItens(json);
        }
    } else {
        $('#quantidade').html('');
        $('#saidaTxt').text('');
        listaItens(json);
    }

  });

});

function listaItens(objeto) {
  for (var ind in objeto) {
    var li = '<li class="ui-li-has-thumb ui-first-child"><a href"' + objeto[ind]['link'] + '" class="ui-btn ui-btn-icon-right ui-icon-carat-r">' +
        '<img src="' + objeto[ind]['imagem'] + '" class=ui-li-thumb">' +
        '<h2>' + objeto[ind]['titulo'] + '</h2>' +
        '<p>' + objeto[ind]['descricao'] + '</p>' +
        '<p class="ui-li-aside">' + objeto[ind]['marca'] + '</p>' +

        '</a></li>';

    $('#saidaTxt').append(li);

  }

}

If anyone can give me a light thank you !!!

Answer 1

Two adjustments:

• Add the command $('#saidaTxt').html(''); in the first line of the function listaItens
• On the line var saida = array(); adjustment to var saida = Array();