Question

在作业中，我们应该在搜索按钮上使用事件监听器构建一个简单的搜索功能。因此，有一个名为store.js的文件，其中包含一个全局对象数组，用于模拟相册数据库。当用户搜索艺术家时，它应该在新页面上显示结果。我让它循环遍历数组，得到结果，并在页面上显示它。我无法弄清楚的是如何打开搜索结果＆＃34;页面，并在那里显示结果。如果我将结果保存到全局变量并尝试在新页面上显示它，则表示＆＃34; undefined＆＃34;。需要注意的是，这是一个初学者客户端JS类，因此不应该是任何＆＃34;后端＆＃34;需要的语言。我会很感激任何提示或批评。

这是来自作业指示：

创建名为search.js的文件。

在search.js脚本中创建一个事件侦听器，该脚本由一个名为search的函数处理，该函数处理onclick事件。   提交搜索按钮。

当我输入艺术家姓名（我现在只想按艺术家姓名搜索）时，在搜索框中点击提交，您的搜索   函数应循环遍历假冒的数据库中的   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);

与您提出的问题不同，我提供了完整的解决方案。但是你很对，我认为没关系。我还添加了一些你从学校无法知道的ES6东西，所以这个答案在作弊方面毫无用处。如果应用程序完全无服务器，则有两个页面没有意义。这就是为什么我实施了网址更改，不一定是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

JavaScript简单搜索 - 如何在新页面上显示结果？

3 个答案: