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