JavaScriptの簡易検索 - 新しいページに結果を表示するには？

Question

割り当てでは、検索ボタンでイベントリスナーを使用して簡単な検索機能を構築することになっていました。したがって、アルバムのデータベースをシミュレートするオブジェクトのグローバル配列を持つstore.jsというファイルがあります。ユーザーがアーティストを検索すると、結果は新しいページに表示されます。配列をループして結果を得、ページに表示させます。 私が理解できないことは、「検索結果」ページを開き、そこに結果を表示する方法です。結果をグローバル変数に保存し、それを新しいページに表示しようとすると、 "undefined"と表示されます。 これは初心者のクライアントサイドのJSクラスなので、必要な "バックエンド"言語はありません。 私は、あらゆるヒントや批判を感謝します。

これは、割り当て手順からです：

1. はsearch.jsというファイルを作成します。
2. 検索の送信ボタン のonclickイベントを処理するsearchという関数によって処理されるsearch.jsスクリプトでイベントリスナーを作成します。
3. アーティスト名を入力すると（今はアーティスト名で検索しています）、検索ボックスに「submit」と入力すると、 の検索機能は 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あなたの質問とは異なり、私は完全な解決策を提供しました。しかし、あなたが大丈夫だったので、私はそれが大丈夫だと思った。アイブはまた、あなたが学校から知ることができないES6のものをいくつか追加しました。だから、この答えは不正行為には役に立たないでしょう。アプリケーションが完全にサーバーレスであれば、2つのページは意味をなさない。なぜ、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