前提・実現したいこと
現在、ajaxを利用して楽天ブックスの検索機能を作っています。
以下のソースコードまで完成させたのですが、これに加えて、もし同じキーワードが続けて検索されたら(例えばプログラミングと検索した後に続けてプログラミングと検索する)、20件ずつ新しい検索結果がリストの上へと追加されるようにしなければならないようです。
そして、違うキーワードが検索された場合は、現在のように中身をクリアにしてから表示させるようにします。
jqueryを勉強し始めてまだ一日目なのでこの分岐処理をどこにどういう風に書いたらいいか調べても分からなかったのですが、アドバイス頂けますでしょうか。
該当のソースコード
javascript
1$(function () { 2 $('#js-search-button').on('click', function () { 3 var searchword = $('#js-search-word').val(); 4 // console.log(searchword); 5 $.ajax({ 6 url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', 7 type: 'GET', 8 datatype: 'json', 9 data: { 10 keyword: searchword, 11 applicationId: '', 12 booksGenreId: '001', 13 page: 1, 14 hits: 20 15 } 16 //通信に成功した場合 17 }).done(function (data) { 18 if (data.count > 0){ 19 $("ul").empty(); 20 $.each(data.Items,function(i,item) { 21 var list = $('<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="' + 22 item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item 23 .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + 24 '<p class="lists__item__detail">作品名: ' + item.Item.title + '</p>' + 25 '<p class="lists__item__detail">作者 : ' + item.Item.author + '</p>' + 26 '<p class="lists__item__detail">出版社: ' + item.Item.publisherName + '</p>' + '</a>' + 27 '</div>' + '</li>'); 28 $('ul').append(list); 29 }) 30 } else if (data.count === 0) { 31 $('.lists').before('<div class="coment"></div>') 32 coment = $('.coment'); 33 coment.html('<p class="message">検索結果が見つかりませんでした。<br>別のキーワードで検索して下さい。</p>'); 34 } 35 }) 36 //通信に失敗した場合 37 }).fail(function (err) { 38 $('.lists').after('<div class="datacoment"></div>') 39 datacoment = $('.datacoment'); 40 datacoment.html('<p class="message">データ通信できませんでした<br>接続を確認してください。</p>'); 41 }) 42 });
補足情報(FW/ツールのバージョンなど)
html
1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <meta name="format-detection" content="telephone=no"> 7 <title>jQuery</title> 8 <link rel="stylesheet" href="../../common/css/reset.css"> 9 <link rel="stylesheet" href="../../common/css/base.css"> 10 <link rel="stylesheet" href="./css/style.css"> 11 </head> 12 <body> 13 <div class="wrap"> 14 <div class="container"> 15 <div class="header"> 16 <p class="header__title">Search Books!</p> 17 </div> 18 <div class="search"> 19 <div class="search__text"> 20 <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> 21 </div> 22 <button id="js-search-button" class="search__btn">検索する</button> 23 </div> 24 <ul class="lists"></ul> 25 </div> 26 </div> 27 <script src="../../common/js/jquery.js"></script>