JavaScript простой поиск - как отобразить результат на новой странице?

Question

В задании мы должны были создать простую функцию поиска, используя прослушиватель событий на кнопке поиска. Таким образом, есть файл, называемый store.js, с глобальным массивом объектов для имитации базы данных альбомов. Когда пользователь ищет художника, он должен отображать результат на новой странице. Я получил его, чтобы пройти через массив, получить результат и показать его на странице. Я не могу понять, как открыть страницу «Результаты поиска» и отобразить там результат. Если я сохраню результат в глобальной переменной и попытаюсь отобразить его на новой странице, то он говорит «undefined». Просто обратите внимание, что это начинающий клиентский JS-класс, поэтому не должно быть никаких «базовых» языков. Буду признателен за любые намеки или критику.

Это из инструкции присваивания:

1. Создайте файл с именем search.js.
2. Создайте прослушиватель событий в скрипте search.js, который обрабатывается функцией, называемой поиском, которая обрабатывает событие onclick для кнопки отправки для поиска.
3. Когда я набираю имя исполнителя (сейчас я буду искать по имени исполнителя), в поле поиска и нажмите отправить, ваш поиск функция должна прокручивать фальшивую базу данных альбомов в store.js файл. Откройте новую страницу и отобразите результаты в списке на странице . Вам нужно будет использовать манипуляции dom для этой части.

Спасибо!

HTML:

<button id="searchButton">Search</button> 

<div id="displayResult"></div> 

JS:

//Search 
var result = "Nothing found!"; 

function displaySearch() { 
    "use strict"; 

    var displayResult = document.getElementById("displayResult"); 

    window.open("search.html") //How do I display the result in this page? 

    displayResult.style.display = "block"; 
    displayResult.innerHTML = result; 
} 

function doSearch() { 
    "use strict"; 

    var searchField = document.getElementById("searchField").value; 

    for (var i = 0; i < db.length; i++) { 
     if (db[i].artist.toUpperCase() === searchField.toUpperCase()) { 
      result = db[i].artist; 
     } 
    } 

    displaySearch(); 

} 

function search() { 
    "use strict"; 

    var searchButton = document.getElementById("searchButton"); 
    searchButton.addEventListener("click", doSearch, false); 
} 

window.addEventListener("load", search, false); 

FAKE DB:

var db = []; //array of fake album database 

function Album(id, title, artist, price, relDate, qty, tracks) { 
    "use strict"; 
    this.id = id; 
    this.title = title; 
    this.artist = artist; 
    this.price = price; 
    this.relDate = relDate; 
    this.qty = qty; 
    this.tracks = tracks; 
    db.push(this); 
} 

var album1 = new Album("01", "Animals", "Pink Floyd", 18.99, "01/23/1977", 1000, ["1. Pigs on the Wing 1", "2. Dogs", "3. Pigs (Three Different Ones)", "4. Sheep", "5. Pigs on the Wing 2"]); 

var album2 = new Album("02", "Cosmic Slop", "Funkadelic", 19.99, "07/09/1973", 500, ["1. Nappy Dugout", "2. You Can’t Miss What You Can’t Measure", "3. March to the Witch’s Castle", "4. Let’s Make It Last", "5. Cosmic Slop", "6. No Compute", "7. This Broken Heart", "8. Trash A-Go-Go", "9. Can’t Stand the Strain"]); 

var album3 = new Album("03", "Ghost Reveries", "Opeth", 14.99, "08/29/2005", 1500, ["1. Ghost of Perdition", "2. The Baying of the Hounds", "3. Beneath the Mire", "4. Atonement", "5. Reverie/Harlequin Forest", "6. Hours of Wealth", "7. The Grand Conjuration", "8. Isolation Years"]); 

Answer 1

//Search 
var result = "Nothing found!"; 

function displaySearch() { 
    var displayResult = document.getElementById("displayResult"); 
    window.history.pushState({},"Test","search.html");//fake redirect 
    document.body.innerHTML = result;//clear all content (trough overriding) + add results 
} 

function doSearch() { 
    var searchField = document.getElementById("searchField").value; 

    result=db.filter(el=>el.artist.toUpperCase()===searchField.toUpperCase()).map(el=>el.artist).join("<br>"); 
    //  filter trough than get the artists name and create a html string out of that array 
    displaySearch(); 

} 

function search() { 
    document.getElementById("searchButton").addEventListener("click", doSearch, false); 
} 

window.addEventListener("load", search, false); 

U nlike ваш вопрос спросил, я предоставил полное решение. Но, поскольку вы были совершенно правы, я подумал, что все в порядке. Я также добавил некоторые материалы ES6, которые вы не можете знать из школы, поэтому этот ответ будет бесполезен в отношении обмана. Наличие двух страниц не имеет смысла, если приложение полностью без сервера. Вот почему ive внедрил изменение URL, не должно быть search.html.

Answer 2

Когда вы позвоните window.open, он вернет ссылку на только что открывшееся окно. Оттуда вы можете получить объект document этого окна и написать ему/обновить его по своему усмотрению.

Я не могу дать вам работоспособный фрагмент кода, потому что window.open запрещено в этом контексте, но вы можете просто запустить его в вашем браузере консоли:

var newWin = window.open('', '') //a blank page 
newWin.document.write('HI THERE!') 

То есть то, что отсутствует в вашем коде , ;)

Answer 3

У меня есть отзывы от профессора. Он хотел, чтобы мы использовали sessionStorage, чтобы передать результат поиска на другую страницу.

Спасибо всем, кто пытался помочь.

http://www.w3schools.com/HTML/html5_webstorage.asp