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

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

ただいまの
回答率

87.35%

Laravelで非同期通信

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,660

score 16

前提

商品(画像やタイトル)を持ったAPIの実装をしています。
Laravelと検索機能は、Ajax(jQuery)を使っています。

困っていること(検索機能(Ajax))

①複数回検索すると、結果が付け加わって表示されてしまう。
index.blade.phpのappendが原因なのはわかりますが、どう書き換えれば期待する結果が得られるでしょうか?
例)①ニットと検索→②もう一度ニットと検索
①ニットと検索
②もう一度ニットと検索

②一文字一致でも表示されてしまう
例)「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」(小文字でも大文字でも検索に引っかかっています)が含まれている場合でも、表示されてしまいます。
単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。

③画像が最後に一致するデータのものになってしまいます

④商品が1つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。

 $(".js-MsArea").html('検索に一致する商品がありませんでした');

ご意見いただけますでしょうか?

api.php

Route::group(['prefix' => 'v1'], function() {
    //検索機能
    Route::get('/products', 'ProductController@getSearchByProduct');
});

ProductController.php

    //検索機能
    public function getSearchByProduct(Request $request)
    {
        //header("Content-type: application/json; charset=UTF-8");

        //検索した値を取得
        $search = $request->search;

        //検索した値と商品タイトルに一致するデータを取得
        $products = Product::where('name', 'like', '%'.$search.'%')->get();

        //レスポンスをjson形式で返す
        echo json_encode($products);
    }

index.blade.php

<div class="products js-get-product">
         <div class="js-remove-product">
             @foreach($products as $product)
             <div class="index-product">
                 <img class="index-img" src="{{ asset('/storage/pic/'.$product->pic) }}">
                 <a id="name" class="product-name" href={{ route('products.show', ['product' => $product->id]) }}>{{ $product->name }}<br></a>
             </div>
             @endforeach
         </div>
      </div>
    </div>

<script>
    $(function() {
        $('.formArea').click('submit', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'get',
            url: '/api/v1/products',
            dataType: 'json',
            data: {
                search: $('.js-get-val-search').val()
            },
        }).done(function (data) {
                //通信成功時の処理
                //alert(data);
                $(".index-product").empty();
                $(".index-product").remove();
                var len = data.length;
                if(len === 0){
                    $(".js-MsArea").html('検索に一致する商品がありませんでした');
                }else{
                    console.log(data);
                    $(".js-MsArea").html('検索に一致する商品がありました');
                    for (var i = 0; i < len; i++) {
                        $(".js-get-product").append($('<div class="index-product">'));
                        $(".index-product").append($("<img>").attr({
                            "src": text(data[i].pic),
                            "class": 'index-img',
                        }));
                        $(".index-product").append($("<a>").text(data[i].name).attr({
                            "class" : 'product-name',
                            "id": 'name',
                            "href": '{{ route('products.show', ['product' => $product->id]) }}',
                        }));
                    }
                }
        }).fail(function (data) {
                //通信失敗時の処理
                alert(data);
            });
        });
    });
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/07/22 15:19

    「ツ」「ッ」どっちでしょうか。なるべく正確に表記願います。

    キャンセル

  • m.ts10806

    2019/07/22 15:20

    >①複数回検索すると、結果が付け加わって表示されてしまう。
    これはどういう現象ですか?具体的に記載してください(画面キャプチャもあれば尚良)

    キャンセル

回答 2

checkベストアンサー

+1

①複数回検索すると、結果が付け加わって表示されてしまう。

$('.formArea').click('submit', function (e) {
の冒頭でリストをクリアする。

②一文字一致でも表示されてしまう
例)「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」(小文字でも大文字でも検索に引っかかっています)が含まれている場合でも、表示されてしまいます。

これだけを解消したいなら部分一致ではなく後方一致にする

$products = Product::where('name', 'like', '%'.$search.'%')->get();
↓
$products = Product::where('name', 'like', '%'.$search)->get();

でも「ドットスカート」には「ツ」が入っていないので、なぜこれがヒットするのか不明ですね。
手元で直にSELECTかけてみましたが「ツ」と検索して「ッ」はヒットしていません。

もう少ししっかり対応するのでしたら「検索キーワード」テーブルを作り、商品IDでリレーション貼って検索の際はそちらを見に行くようにすれば良いと思います(既に出ている回答通り)

③画像が最後に一致するデータのものになってしまいます(上の画像参照)

データを見ないと何とも言えませんが、doneで返ってきているデータをconsole.log(data);で確認してみてください。
というか、dataを取得したのですからdataを使ってください。
ここで$productを使う意味は全くないと思いますし、bladeの構文を入れること自体無理があるのでは?
せめて使うのでしたら{{ route('products.show')}}のみであとはJavaScript側の仕事ですね。

細かいですが:

echo json_encode($products);


LaravelではJSONのレスポンスを返せる機能があります。
※冒頭ではルートやコントローラから文字列を返す他に、配列も返せます。フレームワークは自動的に、配列をJSONレスポンスへ変換します。とありますし、自身でjson_encode()を書く機会ってないと思います。

④商品が1つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。

検索に一致しない = data.lengthが0になるということですよね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/22 20:45

    なるほどそういうことですね。
    XAMPPのphpMyAdminから作ったのでそのあたりは考慮されてないと思います。

    キャンセル

  • 2019/07/23 01:13 編集

    大変わかりやすい回答ありがとうございます!
    無事解決できました。
    特定のワードには検索キーワードテーブルを使うのですね。

    キャンセル

  • 2019/07/23 06:21

    要件次第です

    キャンセル

+1

ドットスカートから「スカート」はヒットしたいけど「ツ」はヒットしたくない場合
完全一致させたいキーワードを保持するカラムを作り、照合順序をutf8mb4_binなどで保持し
全文検索で検索をかければよいでしょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/23 02:23

    回答ありがとうございます。やってみます!

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る