title: Is it possible to have results still displayed upon return to a page?
body: <p>I have a filter table/(search) page, only when I navigate through some pages and return back to the filter table/(search) page in question the results disappear</p>
  <p>I really don't want to reload the page. I simply want to return to the page and find that nothing has changed with the page. I simply want to return to the page as it was. As I see it if the keyword exists in the input box, then the results should still be displayed.</p>
  <p>Please bear in mind that this is less of a search page though more a filter table results page</p>
  <p>I could store the string in <code>localStorage</code>, but it does slow things down somewhat. There must be a simpler solution when considering that I'm only using a table filter for the results. Some kind of little trigger seems to make sense, but that's the problem I'm having difficulty with figuring</p>
  <p>jsfiddle.net/7BUmG/2 See this demo from another user has similarities to what I am doing, notice though when you navigate away from the the page and return the results are sill there! - this is what I'm aiming for</p>
  <p>I wonder if anyone knows of simple plugin or some demo code that might be available. If someone could point me to this it would be fantastic!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
  var input, table, rows, noMatches, tr, markInstance;
   
      $(document).ready(function init() {
      input = document.getElementById('myInput');
      noMatches = document.getElementById('noMatches');
   
      table = document.querySelectorAll('#myTable table tr:first-child');
      rows = document.querySelectorAll('#myTable table tr');
   
      markInstance = new Mark(table);
      input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
      });    
   
   
      function ContactsearchFX() {
        resetContent();
        markInstance.unmark({ done: highlightMatches });
      }
   
   
   
      function resetContent() {
              $('.noMatchErrorText').remove(); 
                //Remove this line to have a log of searches
   
               //noMatches.textContent = '';
        rows.forEach(function(row) {
          $(row).removeClass('show');        
        });
      }
   
      function highlightMatches() {
        markInstance.mark(input.value, {
          each: showRow,
          noMatch: onNoMatches,
          exclude: ['.nonsearch']
        })
      }
   
   
   
      function showRow(element) {
      //alert(element);
        $(element).parents('tr').addClass('show');                $(element).parents('tr').siblings('tr').addClass('show');
                      //Parents incase of several nestings
      }
   
   
   
      function onNoMatches(text) {
        $('#myInput').after('&lt;p class="noMatchErrorText"&gt;No records match: "' +     text +                '"&lt;/p&gt;'); 
      }
      
      
      
      /* Prevents Return/Enter key from doing anything */
      
      $(document).on('submit', 'form', function(e){
      /* on form submit find the trigger */
      if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
          /* if the trigger is not between selectors list, return super false */
          e.preventDefault();
          return false;
       } 
       });    
      
          /* Prevents Return/Enter key from doing anything */
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
  .input-wrap  {
        margin-bottom: 12px;
      }
   
      #myInput:invalid ~ .hints {
        display: block;
      }
   
   
   
      #noMatches:empty, #noMatches:empty + .hints {
        display: none;
      }
   
   
      .style1 tr {
        display: none;
      }
   
   
      .style1 .show {
        display: table-row;
      }
   
   
   
      #myTable table tr:first-child td mark {
      background: orange;
      font-weight: bold;
      color: black;
      }
      mark {
      background: initial;
      }    .style1  {
          text-align: left;
      }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"&gt;
      &lt;/script&gt;
   
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
      /mark.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-wrap"&gt;
      &lt;label&gt;
      Search 
      &lt;input id="myInput" type="text" required
         placeholder="Search Titles" /&gt;
      &lt;/label&gt;
      &lt;/div&gt;
   
      &lt;div class="hintsWrap"&gt;
      &lt;p id="noMatches"&gt;&lt;/p&gt;
      &lt;p class="hints"&gt;
      Hints: type "Title1", "Title2", "Title3"...
      &lt;/p&gt;
      &lt;/div&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;table id="myTable" style="width: 100%" class="style1"&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
      &lt;br /&gt;
          &lt;br /&gt;
          &lt;table style="width: 100%"&gt;
                  &lt;tr&gt;
                          &lt;td&gt;
                          &lt;table style="width: 100%"&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Type&lt;/th&gt;
                                          &lt;td&gt;type1&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Title&lt;/th&gt;
                                          &lt;td&gt;title1&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Description&lt;/th&gt;
                                          &lt;td&gt;description1&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Date&lt;/th&gt;
                                          &lt;td&gt;date1&lt;/td&gt;
                                  &lt;/tr&gt;
                          &lt;/table&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br /&gt;
          &lt;br /&gt;
                          &lt;table style="width: 100%"&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Type&lt;/th&gt;
                                          &lt;td&gt;type2&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Title&lt;/th&gt;
                                          &lt;td&gt;title2&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Description&lt;/th&gt;
                                          &lt;td&gt;description2&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Date&lt;/th&gt;
                                          &lt;td&gt;date2&lt;/td&gt;
                                  &lt;/tr&gt;
                          &lt;/table&gt;
      &lt;br /&gt;
           &lt;br /&gt;
                          &lt;table style="width: 100%"&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Type&lt;/th&gt;
                                          &lt;td&gt;type3&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Title&lt;/th&gt;
                                          &lt;td&gt;title3&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Description&lt;/th&gt;
                                          &lt;td&gt;description3&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                          &lt;th class="style1"&gt;Date&lt;/th&gt;
                                          &lt;td&gt;date3&lt;/td&gt;
                                  &lt;/tr&gt;
                          &lt;/table&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
                          &lt;/td&gt;
                  &lt;/tr&gt;
          &lt;/table&gt;
   </code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/gH8sQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gH8sQ.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/tCg0r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tCg0r.png" alt="enter image description here" /></a></p>