CODEWITHSUNDEEP
javascripthtml
Ashonko
Ashonko

Reputation: 623

How to re-perform the javascript keyup function automatically when navigating back to the page?

Is there any way to keep the javascript keyup function result when navigating back to the page?

In my book list page, I have a search option that searches the title available on the page with javascript. Say I type harr in the search box, and the Harry Potter result appears. If I click the link to the Harry Potter page and come back again to the index page, the keyword harr still in there in the search box but it is not displaying the result obviously rather the whole page.

Is there any way that when I come back to the index page and if there is any input in the search box, the js will run again with the keyword so that it'll just show the result, not the entire page?

Here is the snippet: As the snippet doesn't support multiple pages, here is the project in codepen where I've created dummy pages for the book Harry Potter.

const searchBar = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup', function(e) {
    const term = e.target.value.toLocaleLowerCase();
    const books = document.getElementsByTagName('h5');
    var notAvailable = document.getElementById('notAvailable');

    var hasResults = false;
    Array.from(books).forEach(function(book) {
        const title = book.textContent;
        if (title.toLowerCase().indexOf(term) != -1) {
            book.parentElement.parentElement.style.display = 'flex';
            hasResults = true;
        } else {
            book.parentElement.parentElement.style.display = 'none';
        }
    });
    notAvailable.style.display = hasResults ? 'none' : 'block';
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form id="search-books">
   <input type="text" placeholder="Search a book ... ">
</form>
<div class="container">
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg"/></div>
      <div class="col-10">
         <h5>	The Hunger Games</h5>
         <a href="The-Hunger-Games.html">Learn</a> 
      </div>
   </div>
   <br>
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg"/></div>
      <div class="col-10">
         <h5>Harry Potter</h5>
         <a href="Harry-Potter.html">Learn</a> 
      </div>
   </div>
   <div class="row list-single" id="notAvailable" style="display: none;">
      <div class="col-12">
         <h5>Sorry, the book has not been added yet</h5>
      </div>
   </div>
</div>

Upvotes: 0

Views: 29

Answers (1)

Matus Dubrava
Matus Dubrava

Reputation: 14492

If you just put this code (in addition to your current code) to the top level of your script. It will be executed as soon as the page loads (technically, as soon as the script loads) and if there is any text in the input field, that text will be used to filter book entries right away.

const term = searchBar.value;

if (term !== '') { // test if the input fields is not empty
  const books = document.getElementsByTagName('h5');
  let notAvailable = document.getElementById('notAvailable');

  let hasResults = false;
  Array.from(books).forEach(function(book) {
      const title = book.textContent;
      if (title.toLowerCase().indexOf(term) != -1) {
          book.parentElement.parentElement.style.display = 'flex';
          hasResults = true;
      } else {
          book.parentElement.parentElement.style.display = 'none';
      }
  });
  notAvailable.style.display = hasResults ? 'none' : 'block';
}

Upvotes: 1

Related Questions