导航回页面时如何自动重新执行javascript keyup功能？

Question

导航回页面时，有什么方法可以保持javascript keyup函数的结果？

在我的图书清单页面中，我有一个搜索选项，可使用javascript搜索页面上可用的书名。 假设我在搜索框中输入harr ，然后出现哈利波特的结果。 如果我单击指向“哈利波特”页面的链接，然后再次返回到索引页面，则关键字“ harr仍在搜索框中，但显然没有显示结果，而是显示了整个页面。

有什么方法可以让我回到索引页面，并且如果搜索框中有任何输入，那么js将再次使用关键字运行，以便它仅显示结果，而不是整个页面？

这是代码段：由于该代码段不支持多页，因此这是Codepen中的项目，在该项目中，我为《哈利·波特》这本书创建了虚拟页面。

 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> 

Answer 1

如果仅将此代码（除了当前代码之外）放到脚本的顶层。 页面加载后（技术上，脚本加载后）将立即执行，并且如果输入字段中有任何文本，该文本将立即用于过滤书籍条目。

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