Search system with charging on demand

Question

I have a search system with load on demand with php and jquery, I can search for letters correctly, and I do the load on demand correctly, the problem is that when switching letters to search, it loads the data of the new letter along with the previous clicked letter, does not clear the old search to load the new.

Follow my php code:

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;

Now follow my jquery code:

$('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();
            }
        }
    });
}

Answer 1

Create a global variable to store the letter you searched for at any given time, then just compare the letter that was saved with the letter clicked, and if it was different, clear the div using jQuery.empty()

Commented example:

/* Variável global para salvar a última letra pesquisada */
let ultimaLetraPesquisada;

$('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', ultimaLetraPesquisada != res);

        $("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', ultimaLetraPesquisada != res);

            /* O `ultimaLetraPesquisada != res` irá comparar se a letra pesquisada é igual a pesquisa anterior */

            /* Salva a última letra pesquisada */
            ultimaLetraPesquisada = res
        });

        /* Salva a última letra pesquisada */    
        ultimaLetraPesquisada = res

});

function carregar(inicio, max, url, resetaDiv = false) {

    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();

            if (resetaDiv) {
              /* Limpa a div */
              $('ul#alfabeto-itens').empty();
            }

            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();
            }
        }
    });
}

^{Source:https://hastebin.com/izovuxetuk.js}