javascript - Ajax - 在搜索字段清空后重新加载 div 中的先前数据

Question

我有一个小的 ajax 脚本，我可以使用它搜索和加载结果，而无需重新加载或重定向页面:

$(document).ready(function(){

$('#db-search').keyup(function(){

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

    if(txt != ''){
        $('#db-search-results').html('');
        $.ajax({
            url: 'search.php',
            method: 'post',
            data:{search:txt},
            dataType: 'text',
            success:function(data){
                $('#db-search-results').html(data);
            }
        });
    } else{
        //reload previus data
    }

});

});

可以，但是有问题。在 #db-search 字段中输入任何内容之前，我已经在 #db-search-results 中显示了数据库中的所有结果。现在，当我搜索某些内容时，所有以前的数据都会被这些新结果替换，但如果我清除搜索字段，我的结果就会消失(这没关系)，但我以前的数据不会回来。

有没有办法在清除该搜索字段后保留以前的数据？

P.S: 目前我只是在执行一个 SELECT * 查询，然后我使用 $('#db-search-results').html('search. php'); 但这是一个额外的查询，我宁愿寻找另一种方法来执行此操作 :D

Answer 1

您可以在页面加载后将其存储在变量中，并在您需要时显示它，例如:

$(document).ready(function(){
    var default_data = $('#db-search-results').html();

    $('#db-search').keyup(function(){
        var txt = $(this).val();

        if(txt != ''){
            $('#db-search-results').html('');
            $.ajax({
                url: 'search.php',
                method: 'post',
                data:{search:txt},
                dataType: 'text',
                success:function(data){
                    $('#db-search-results').html(data);
                }
            });
        } else{
            $('#db-search-results').html(default_data);
        }
    });
});