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

0

Alright? I have a very annoying question here and I could not find any viable solution. 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 each letter I type return the query

$(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, it subscribes to the div (this I want to happen), but when I delete all typed letters, I need the div to return to the original state, ie the state where only my php query acts on the code.

Would anyone have a clue how to solve this?

    
asked by anonymous 06.06.2017 / 20:53

1 answer

1

Just save the div.result data before the first interaction. See the htmlOrig variable. When you do not have anything else to show, go back to the previous place and your HTML returns to the 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);
    }       
});
});
    
06.06.2017 / 20:56