Ajaxを使った検索機能の作成(楽天ブックスAPI)

前提・実現したいこと

検索ボックスにキーワードを入れ、検索ボタンを押した時に、楽天ブックスAPIからデータを取得し20件ずつ一覧に表示したいです。
さらに、同じワードで検索した時、最初の20件は削除され、次の新しい20件が表示されるようにしたいです。
初心者なので簡単なミスをしてしまっているかもしれませんが、ご指導のほどよろしくお願い致します。

発生している問題・エラーメッセージ

検索をしても結果が0件になってしまいます。データがそもそも取得できていないのかもしれません。

該当のソースコード

    <script>
      $(function() {
        $('#js-search-button').on('click',function() {
          var searchword = $('#js-search-word').val();
          console.log(searchword);
          $.ajax({
            url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
            type: 'GET',
            datatype: 'json',
            data: {
              applicationId: '',
              booksGenreId: '001',
              size: '0',
              hits: '20',
              page: '1',
              keyword: 'searchword',
            }
          })
          .done(function(data) {
            console.log(data.hits);
            if(data.count > 0) {
              $("ul").empty();
              $.each(data.Items,function(i,item) {
                console.log(data.Items);
                var list = $('<li class = "lists__item">' + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item.largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + '<p class="lists__item__detail">作品名：　' + item.Item.title + '</p>' + '<p class="lists__item__detail">作者　：　' + item.Item.author + '</p>' + '<p class="lists__item__detail">出版社：　' + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>');
                $('.lists').prepend(list);
              })
            } else if(data.hits === 0) {
              $('.lists').after('<div class = "coment"></div>')
              coment = $('.coment');
              coment.html('<p class = "message">検索結果が0件でした。<br>キーワードを変えて検索してください。</p>');
            }
          }).fail(function() {
            $('.lists').after('<div class = "datacoment"></div>')
            datacoment = $('.datacoment');
            datacoment.html('<p class = "failmessage">データ通信できませんでした。<br>接続を確認してください。</p>');
          })
        });
      });
    </script>

試したこと

console.logで確認したところ、data.hitsは0。searchwordはサッカー。でした。
dataのkeywordの部分に例(サッカー)と入れて検索するとサッカーの検索結果が表示されました。
keywordの部分にサッカーと入れた時のconsole.log(data.Items)はきちんと表示されていました。

補足情報（FW/ツールのバージョンなど）

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrap"> <div class="container"> <div class="header"> <p class="header__title">Search Books!</p> </div> <div class="search"> <div class="search__text"> <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> </div> <button id="js-search-button" class="search__btn">検索する</button> </div> <ul class="lists"></ul> </div> </div> <script src="../../common/js/jquery.js"></script>

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

回答1件

ベストアンサー

js
1// keyword: 'searchword',
2//          ↓         ↓
3   keyword: searchword,

投稿2019/03/24 11:46

kei344

総合スコア69407

tomo

2019/03/24 12:00

出てきました！変数なのに’’で囲ってしまっていたんですね... ありがとうございます！

tomo

2019/03/24 12:04

すみません、もう一つお聞きしたいのですが、検索結果が20件表示されるのですが、再検索した時に次の20件が表示されません。 $("ul").empty();で一度空にしているつもりだったのですが、書く場所が違ったりしたのでしょうか？

kei344

2019/03/24 12:10

エラーが無いか確認してみてください。https://eng-entrance.com/javascript-display-error

tomo

2019/03/24 12:18

やってみましたが、エラーはないようです...

kei344

2019/03/24 12:50

data.countがあるか、$.eachは動いているか、など、確認すべきところは多数有りますが、何をどう確認して何が起こっているかを提示しない限りこちらにはわかりません。

tomo

2019/03/26 20:20

色々と試してみました。 20件は問題なく表示されます。別のワードで検索した場合はemptyのおかげで再検索ワードの結果が20件表示されます。しかし、同じワードで何度検索しても最初の20件と同じ結果が表示されてしまいます。 2回目の検索で次の新しい20件(21件目～40件目)、3回目の検索で次の20件(41件目～60件目)となるのが理想です。

tomo

2019/03/26 20:24

恐らくですが、 var list = テンプレートのところを、var list += テンプレートの形にできれば、再検索時に次の20件が表示されると思うのですが、変数の定義の時に+＝にすることが出来ません。 var list += テンプレートと表現したいのですが、どのように記述すれば+＝と同じ形をとることが出来るでしょうか？

kei344

2019/03/27 03:02

2ページ目からは $("ul").empty(); しなければ良いだけではないでしょうか。

tomo

2019/03/27 07:15

今のままだと、検索ボタンを押すたびに1度空にしてしまっているということですか？同じワードで検索した時だけ、2回目以降はemptyを消すということですよね…

tomo

2019/03/27 07:15

すみません。そのやり方が分からないので、教えていただきたいのです。お願いします。

kei344

2019/03/27 07:59

・前のキーワードを覚えるための変数を用意する・空にする前に全快のキーワードと同じか判定する