Question

我有一个简单的应用程序，可以搜索Google Books API并返回公共领域书籍列表。然后，用户可以打开免费书籍并阅读它。

问题是，如果您多次搜索，它会将下一个搜索结果附加到该页面。

有没有办法让第二次搜索的结果“替换”第一批结果？

小提琴：http://jsbin.com/welcome/52020

       <form name="inputForm"
                  onsubmit="beginSearch(this.query.value); return false;"
                  method="get">
                <input type="text" size="30" name="query" value="Romeo and Juliet" id="textfield"/>
                <input type="submit">
        </form>

        <div id="lister">
        </div>


//for list
function beginSearch(query) {

    var script = document.createElement("script");

    script.src = 'https://www.googleapis.com/books/v1/volumes?q='
            + encodeURIComponent(query) + '&filter=free-ebooks'
            + '&callback=handleResultsList';
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

//structure results
    function handleResultsList(response) {

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }

}

Answer 1

由于你正在使用jQuery，它应该像做这样的事情一样简单：

    //structure results
    function handleResultsList(response) {

    $('#lister').find('a').remove(); // Remove all existing links before adding new

    for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        var title = item.volumeInfo.title;
        var thumb = item.volumeInfo.imageLinks.thumbnail;
        link = item.accessInfo.webReaderLink + '&amp;output=embed'; // cache value
        var img = $("<img/>").attr("src", thumb);
        var booklink = "booklink";
        var bookframe = "bookframe";

            $("<a/>").attr({class: booklink, href: link, title: title}).append(img).appendTo("#lister");

    }
}

Answer 2

将onsubmit更改为

$("#lister").html(""); beginSearch(this.query.value); return false;

简单的图书搜索应用：如何在第二次搜索时替换搜索结果？

2 个答案: