javascript - 清除搜索字段后，如何将 重置回 AJAX 响应之前的状态？

Question

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

我将在下面包含一些代码片段，但我确信它不是特别原创的东西。

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