jQuery 同じキーワードで検索するたびにデータを追加していきたい

###前提・実現したいこと
楽天apiを使い、キーワードで検索して結果が出た状態で、もう一度検索ボタンを押すとデータが追加されて表示されるようにしたいです。
一回の検索で20件商品が表示され、もう一度検索ボタンを押すと降順で20件追加されてどんどん増えて行く仕様を目指しています。
ただ、この動きは同一のキーワードの時のみで、途中で他のキーワードで検索したら結果はクリアされてまた20件新たに出るようにしたいです。
###発生している問題・エラーメッセージ
現在は同一キーワードで検索しても、また最初からデータが取得されて次のデータを取得できない状態です。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>api test</title>
6    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
7    <link rel="stylesheet" href="css/reset.css">
8    <link rel="stylesheet" href="css/base.css">
9    <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12    <div class="wrap">
13        <div class="container">
14            <div class="header">
15                <p class="header__title">Search Books!</p>
16            </div>
17            <div class="search">
18                <div class="search__text">
19                    <input type="text" id="js-search-word" class="search__text__input" value="" placeholder="検索する">
20                </div>
21                <button id="js-search-button" class="search__btn">検索する</button>
22            </div>
23            <ul class="lists">
24                
25            </ul>
26        </div>
27    </div>
28    <script src="js/jquery.js"></script>
29    <script type="text/javascript">
30    //ここにjQueryが入ります
31    </script>
32</body>
33</html>

css
1@charset "UTF-8";
2
3html {
4    height: 100%;
5}
6body {
7    min-height: 100%;
8    color: #333;
9    background-color: #fafafa;
10}
11.container {
12}
13.header {
14    width: 100%;
15    background-color: #43cee0;
16}
17.header__title {
18    line-height: 60px;
19    text-align: center;
20    font-size: 20px;
21    color: #fff;
22}
23.search {
24    overflow: hidden;
25    margin-bottom: 50px;
26    background: #fff;
27    box-shadow: 0 1px 5px #ccc;
28}
29.search__text {
30    width: 100%;
31}
32.search__text__input {
33    -webkit-box-sizing: border-box;
34            box-sizing: border-box;
35    width: 100%;
36    margin-bottom: 20px;
37    padding: 0 10px;
38    line-height: 3em;
39    border-top: none;
40    border-left: none;
41    border-right: none;
42    border-bottom: 1px solid #eee;
43    font-size: 20px;
44}
45.search__btn {
46    display: block;
47    margin: 0 auto 20px;
48    padding: 0 20px;
49    line-height: 40px;
50    border: none;
51    font-size: 18px;
52    color: #fff;
53    background-color: #43cee0;
54}
55.search__btn:hover {
56    background-color: #1eabbd;
57}
58.lists {
59    overflow: hidden;
60    margin-left: 20px;
61    
62}
63.lists__item {
64    -webkit-box-sizing: border-box;
65            box-sizing: border-box;
66    display: inline-block;
67    width: 25%;
68    padding: 0 20px 20px 0;
69    vertical-align: top;
70    text-align: center;
71}
72.lists__item__inner {
73    width: 100%;
74    max-width: 200px;
75    margin: 0 auto;
76}
77.lists__item__link {
78    display: block;
79    text-decoration: none;
80}
81.lists__item__img {
82    margin-bottom: 20px;
83    width: 100%;
84    max-width: 150px;
85    -webkit-box-shadow: 0 1px 5px #ccc;
86            box-shadow: 0 1px 5px #ccc;
87}
88.lists__item__detail {
89    margin-bottom: 10px;
90    padding-left: 5em;
91    text-indent: -5em;
92    line-height: 1.5em;
93    text-align: left;
94    font-size: 12px;
95}
96.message {
97    margin-bottom: 50px;
98    text-align: center;
99}
100
101@media screen and (max-width: 767px) {
102    .lists__item {
103        width: 33.33%;
104    }
105}
106
107@media screen and (max-width: 479px) {
108    .lists__item {
109        width: 50%;
110    }
111}

javascript
1$(function(){
2      $('#js-search-button').on('click',function(){
3        var keyword = $('#js-search-word').val();
4        
5        $.get('https://app.rakuten.co.jp/services/api/BooksTotal/Search/20170404?',{
6          applicationId: "1096525417627568230",
7          keyword: keyword,
8          booksGenreId: '001',
9          hits: '20',
10        },
11        function(data){
12          if (data.count > 0){
13            $('ul').empty();
14            $('.coment').css('display','none');
15            $.each(data.Items,function(i,item){
16              // console.log(item);
17              var list = $('<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="' +
18                item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item
19                .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' +
20                '<p class="lists__item__detail">作品名：　' + item.Item.title + '</p>' +
21                '<p class="lists__item__detail">作者　：　' + item.Item.author + '</p>' +
22                '<p class="lists__item__detail">出版社：　' + item.Item.publisherName + '</p>' + '</a>' +
23                '</div>' + '</li>');
24              $('ul').append(list);
25            })
26          }
27          if (data.count === 0) {
28            $('ul').empty();
29            $('ul').before('<div class="coment"></div>')
30            coment = $('.coment');
31            coment.html('<p class="message">検索結果が見つかりませんでした。<br>別のキーワードで検索して下さい。</p>');
32          }
33        });
34      });
35      });

###補足情報(言語/FW/ツール等のバージョンなど)
検索がなかなかうまくいかず詰まってしまいました。
jqueryの知識を深めるためにもアドバイスよろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

楽天のAPIドキュメントを見てみると、pageというパラメータが利用できるようです。

楽天ウェブサービス: 楽天ブックス総合検索API(version:2017-04-04) | API一覧
https://webservice.rakuten.co.jp/index.php/api/bookstotalsearch/

$.get()の中でkeywordなどと一緒にpageでページ番号を渡すようにすると、2ページ目以降のデータを取得できるようになると思います。

2ページ目の結果を1ページ目の後ろに追加するには、$('ul').empty();としなければ、$('ul').append(list);だけでOKですね。

追記

.on('click',〜)の外側でvar pageNum = 0;と変数を定義し、.on('click',〜)の内側でpageNum = pageNum + 1;とすることで、ボタンがクリックされる度にページ番号が1ずつ増加します。
あとはpageパラメータにpage: pageNumのようにしてこれを渡すことで、続けて次のページをリクエストできるようになります。

投稿2018/01/22 04:06

編集2018/01/22 06:50