Sistema de busca com carregamento sob demanda

[sacjamm 0]

Tenho um sistema de busca com carregamento sob demanda com php e jquery, consigo buscar por letras corretamente, e faço o o carregamento sob demanda corretamente, o problema é que ao trocar de letra para buscar, ele carrega os dados da nova letra junto com a letra clicada anterior, nao limpa a busca antiga para carregar a nova.

 

O site é este:

http://meocenterweb.com.br/exames

 

Segue meu código php:

if (isset($_GET['action_search']) && $_GET['action_search'] == 'action_search'):
header('Cache-Control: no-cache, must-revalidate');
header('Content-Type: application/json; charset=utf-8');
$type = 'exame';
$_SESSION['letras'] = $_GET['letra'];

$inicio = $_POST['inicio'];
$max = $_POST['max'];

if (!empty($_GET['letra']) && $_GET['letra'] != 'all'):

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 and post_letra = :letra order by post_letra asc", 
            "type={$type}&letra={$_GET['letra']}");

    $resultado['resultaQuantidade'] = $read->getRowCount();

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 and post_letra = :letra limit $inicio, $max",
            "type={$type}&letra={$_GET['letra']}");

    if ($resultado['resultaQuantidade'] > 0):

        foreach ($read->getResult() as $resultados):
            $resultado_dados[] = $resultados;
        endforeach;

        $resultado['dados'] = $resultado_dados;

    else:
        $resultado['dados'] = null;
        $resultado['resultaQuantidade'] = 0;
    endif;

    echo json_encode($resultado);

else:
    unset($_SESSION['letras']);

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 order by post_letra asc", 
            "type={$type}");
    $resultado['resultaQuantidade'] = $read->getRowCount();

    $read->ExeRead("ws_posts", 
            "where post_type = :type and post_status = 1 order by post_letra asc limit $inicio, $max", 
            "type={$type}");

    if ($resultado['resultaQuantidade'] > 0):

        foreach ($read->getResult() as $resultados):
            $resultado_dados[] = $resultados;
        endforeach;

        $resultado['dados'] = $resultado_dados;

    else:
        $resultado['dados'] = null;
        $resultado['resultaQuantidade'] = 0;
    endif;

    echo json_encode($resultado);

endif;
endif;

Agora o jquery:

 

$('tr#search-indexes').on('click', 'a.letra_click', function (e) {
        var res = $(this).attr('search-letra');
        $(this).siblings('a').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
        $('.load').show();

        carregar(0, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search');

        $("a.carregar-mais").click(function (e) {
            e.preventDefault();
            $('.load').show();

            var inicio = $('ul#alfabeto-itens li').length;
            carregar(inicio, 5, '<?= INCLUDE_PATH; ?>/modulos/responds.php?letra=' + res + '&action_search=action_search');
        });

    });

function carregar(inicio, max, url) {

    var dado = {inicio: inicio, max: max};

    $.ajax({
        type: 'post',
        dataType: 'json',
        url: url,
        data:dado,
        beforeSend: function () {
            $('.load').show();
        },
        success: function (data) {
            $('.load').hide();
            $('a.carregar-mais').show();
            for (var j = 0; j < data.dados.length; j++) {
                $('.load').hide();
                $('ul#alfabeto-itens').append('<li class="hg-services__item"><a href="<?= BASE; ?>/exames/' + data.dados[j].post_name + '"><span>' + data.dados[j].post_title + '</span></a></li>');
            }

            var conta = $('ul#alfabeto-itens li').length;
            if (conta == data.resultaQuantidade) {
                $('.load').hide();
                $('a.carregar-mais').hide();
            }
        }
    });
}

 

Edited March 29, 2018 by sacjamm
adicionar novo trecho

[Gabriel Heming 766]

O método append do jQuery apenas adiciona no local selecionado sem remover o que já existe lá.

$('ul#alfabeto-itens').append('<li class="hg-services__item"><a href="<?= BASE; ?>/exames/' + data.dados[j].post_name + '"><span>' + data.dados[j].post_title + '</span></a></li>');

Se quiser substituir, utilize o método .html

 

 

Movido: PHP -> JavaScript