How to return to the "normal state" of Html after a refresh-free Javascript query?

Question

all right? I’m having a very boring question here and I haven’t been able to find any viable solutions. Well, I’ll explain the problem.

This is my class where I will return my query

<div class="col-lg-2 result"> 
    ...  AQUI DENTRO ESTARÁ A CONSULTA INICIAL DA PAGINA
</div>

and this is my code to make every letter I type return the query to me

$(function(){
//Pesquisar os cursos sem refresh na página
$("#pesquisa").keyup(function(){

    var pesquisa = $(this).val();

    //Verificar se há algo digitado
    if(pesquisa != ''){
        var dados = {
            palavra : pesquisa
        }       
        $.post('busca.php', dados, function(retorna){
            $(".result").html(retorna);
        });
    }else{
        $('.result').load('');
    }       
});
});

Now the problem, when I do the search she subscribes to div ( this I want to happen), but when deleting all typed letters, I need the div back to the original state, ie the state in which only my php query acts on the code.

Someone would have a tip on how to fix this?

Answer 1

Just you save the data from div.result before the first interaction. See the variable htmlOrig. When you have nothing else to show, go back to the previous place and your HTML goes back to its original state.

$(function(){

var htmlOrig = $('.result').html();

//Pesquisar os cursos sem refresh na página
$("#pesquisa").keyup(function(){

    var pesquisa = $(this).val();

    //Verificar se há algo digitado
    if(pesquisa != ''){
        var dados = {
            palavra : pesquisa
        }       
        $.post('busca.php', dados, function(retorna){
            $(".result").html(retorna);
        });
    }else{
        $('.result').html(htmlOrig);
    }       
});
});