###「文字が入力されてません。文字を入力してください。」を表示したい。
###現在楽天BOOKSのAPIを使用して検索サイトを作っているのですが、文字の入力が0文字の場合、「文字が入力されてません。文字を入力してください。」という文を表示させたいのですが、fail時の「データ通信できませんでした接続を確認してください。」という文が表示されてしまいます。この形をなおす方法はどのようにすればいいのでしょうか?
$(function () { $('.search__btn').on('click', function () { $('.lists').empty(); var searchword = $('.search__text__input').val(); // console.log(searchword); $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { keyword: searchword, applicationId: '1019399324990976605', booksGenreId: '001', page: 1, hits: 20 } }).done(function (data) { console.log(data.hits); //検索結果が0件の場合 if (data.hits === 0) { $('.lists').after('<div class="coment"></div>') coment = $('.coment'); coment.html('<p class="message">検索結果が0件でした。<br>キーワードを変えて検索してください。</p>'); //文字の入力数が0文字の場合 } else if (data.keyword.val(searchword) === 0) { $('.lists').after('<div class="zero"></div>') zero = $('.zero'); zero.html('<p class="message">文字が入力されてません。<br>文字を入力してください。</p>'); } //通信に成功した場合 data.Items.forEach(function (item) { var template = '<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item .mediumImageUrl + '" 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(template); }) //通信に失敗した場合 }).fail(function () { $('.lists').after('<div class="datacoment"></div>') datacoment = $('.datacoment'); datacoment.html('<p class="message">データ通信できませんでした<br>接続を確認してください。</p>'); }) }); }); </script>
###該当のソースコード
else if (data.keyword.val(searchword) === 0) { $('.lists').after('<div class="zero"></div>') zero = $('.zero'); zero.html('<p class="message">文字が入力されてません。<br>文字を入力してください。</p>');
###試したこと
if()のなかをdata,keyword,searchwordを入れ込んでいましたが、どれもfailに進んでしまいました。
###補足情報(HTML,CSS)
<!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> <script>
.clearfix:after { display: block; clear: both; content: ''; } .wrapper { padding: 20px; } .container { } .header { width: 100%; background-color: #43cee0; } .header__title { line-height: 60px; text-align: center; font-size: 20px; color: #fff; } .search { overflow: hidden; margin-bottom: 50px; background: #fff; box-shadow: 0 1px 5px #ccc; } .search__text { width: 100%; } .search__text__input { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-bottom: 20px; padding: 0 10px; line-height: 3em; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #eee; font-size: 20px; } .search__btn { display: block; margin: 0 auto 20px; padding: 0 20px; line-height: 40px; border: none; font-size: 18px; color: #fff; background-color: #43cee0; } .search__btn:hover { background-color: #1eabbd; } .lists { overflow: hidden; margin-left: 20px; } .lists__item { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 25%; padding: 0 20px 20px 0; vertical-align: top; text-align: center; } .lists__item__inner { width: 100%; max-width: 200px; margin: 0 auto; } .lists__item__link { display: block; text-decoration: none; } .lists__item__img { margin-bottom: 20px; width: 100%; max-width: 150px; -webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; } .lists__item__detail { margin-bottom: 10px; padding-left: 5em; text-indent: -5em; line-height: 1.5em; text-align: left; font-size: 12px; } .message { margin-bottom: 50px; text-align: center; } @media screen and (max-width: 767px) { .lists__item { width: 33.33%; } } @media screen and (max-width: 479px) { .lists__item { width: 50%; } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/12 12:35
退会済みユーザー
2017/12/12 12:38
2017/12/13 06:58