質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

2回答

7107閲覧

ajaxを使った検索機能の作成

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/11/29 01:55

編集2022/01/12 10:55

前提・実現したいこと

現在、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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mri0815

2018/11/29 02:02

コードはコードブロック(```)で囲って下さい。コードを選択して「<code>」ボタンでもOKです。
Lhankor_Mhy

2018/11/29 03:08

『下に追加させつつ、表示される結果の順番がランダムで変わるようにする』をもう少し詳しくお願いします。
退会済みユーザー

退会済みユーザー

2018/11/29 03:28

お手本の挙動をよく確認してみたのですが、ランダムに変わっているのではなく、同じキーワードが続けて検索された場合は、20件ずつ新しい検索結果がリストの上へと追加されていくようです。そして、違うキーワードが検索された場合は、$('ul').empty()で中身をクリアにしてから表示させているのだと思います。確認不足で申し訳ありません。
Lhankor_Mhy

2018/11/29 04:13

であれば、前回の検索ワードを変数に入れておいて、前回と一致するなら中身をクリアする、という処理でいいのでは? ご不明の点があればお知らせください。
m.ts10806

2018/11/29 04:14

編集履歴から確認できるのでセキュアな情報を載せてしまった場合は運営に削除依頼を出して新たに質問を作成された方が良いですね。
退会済みユーザー

退会済みユーザー

2018/11/29 04:39

前回の検索ワードとはどのように表現すればいいのでしょうか。.searchword.prev()などで良いでしょうか。
Lhankor_Mhy

2018/11/29 04:46

それでは動作しないんじゃないかと思います。普通に変数に入れておくのではダメなのですか?
Lhankor_Mhy

2018/11/29 11:08

こっちも捨て垢さんか。
guest

回答2

0

$('ul').empty()で内部をクリアできますよ。

投稿2018/11/29 02:12

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/11/29 03:08

質問が変更されたので、この回答は有効ではなくなりました。
guest

0

新しい検索結果というのは、どういうことでしょうか。
今の実装でも、正しく結果が返ってきているかと思いますよ。

なお、applicationIdはこのような質問サイトに載せない方が良いと思います。

投稿2018/11/29 02:03

hatty

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問