清除搜索字段后，如何将 <div> 重置为 AJAX 之前的响应状态？

Question

我有一个 HTML 页面，列出了数据库中的“所有”数据。我已经包含一个搜索字段，允许用户通过 Perl/AJAX 进程搜索特定的“行”。它工作得很好。用户输入信息，保存原始列表的 div 被 AJAX 请求的结果覆盖。只要他们不断更改搜索字段中的信息，AJAX 进程就会继续触发，并且一切正常。当他们试图通过清除搜索字段中的所有内容而不是简单地重新加载页面来返回原始“全部”列表时，问题就出现了。这让我想知道是否可以强制 div 恢复到它的原始状态（在它被 AJAX 响应覆盖之前）？

我将在下面包含一些代码 sn-ps，但我确信它不是特别原始的东西。

Javascript：

            function myTimer() {

            var typingTimer;
            var doneTypingInterval = 2000;

               $("#devicename").keyup(function(){
               clearTimeout(typingTimer);
               if ($('#devicename').val()) {
               typingTimer = setTimeout(updateText, doneTypingInterval);
               }



            });

                    function updateText() {

                    var devname = $('#devicename').val();
                    $.get("http://domainname/cgi-bin/ajax.pl", "devicename="+devname,
                            function(response,status,http) {
                                    $('#resultsbox').html(response);

                            }, "text");
                    }

            }

HTML

<div id="resultsbox">
<table class="devicetable">
 <tr>
    <td class="tablehead">Company Name</td>
    <td class="tablehead">ID</td>
    <td class="tablehead">Status</td>
    <td class="tablehead">Ticket</td>
    <td class="tablehead">Device/Ticket Notes</td>
    <td class="tablehead">Open SR</td>
 </tr>
<tr> lots of stuff </tr>
</div>

Perl

sub generate_results {
       #DBI stuff, result is formatted and loaded into $result
       print $html->header('text/html;charset=UTF-8');
       print $result;
 }

感谢您提供的信息。我很高兴阅读该主题，只是没有找到与此类相关的任何内容。我发现的所有内容似乎都会使 div 空白、重置表单或编写下一组结果。似乎没有什么想要回到原来的状态。在任何人怀疑之前，我不简单提供标准搜索结果场景，而是选择从整个列表中缩减的原因是因为数据库信息显示的状态可能会不时变化，并且列表是完整的被用作一种操作意识。这就是为什么我想从完整列表转到仅结果返回到完整列表。

Answer 1

将 div inner html 存储在安全的地方，然后恢复它。

使用纯 JavaScript：

// store original html
var originalHtml = div.innerHTML;

// restore it
div.innerHTML = originalHtml;

或者像你一样使用jquery：

// store original html
var originalHtml = $('#resultsbox').html();

// restore it
$('#resultsbox').html(originalHtml);