Laravelで非同期通信

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

###困っていること（検索機能（Ajax））

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

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

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

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

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

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

api.php

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

ProductController.php

PHP
1    //検索機能
2    public function getSearchByProduct(Request $request)
3    {
4        //header("Content-type: application/json; charset=UTF-8");
5
6        //検索した値を取得
7        $search = $request->search;
8
9        //検索した値と商品タイトルに一致するデータを取得
10        $products = Product::where('name', 'like', '%'.$search.'%')->get();
11
12        //レスポンスをjson形式で返す
13        echo json_encode($products);
14    }

index.blade.php

JavaScript
1<div class="products js-get-product">
2         <div class="js-remove-product">
3             @foreach($products as $product)
4             <div class="index-product">
5                 <img class="index-img" src="{{ asset('/storage/pic/'.$product->pic) }}">
6                 <a id="name" class="product-name" href={{ route('products.show', ['product' => $product->id]) }}>{{ $product->name }}<br></a>
7             </div>
8             @endforeach
9         </div>
10      </div>
11    </div>
12
13<script>
14    $(function() {
15        $('.formArea').click('submit', function (e) {
16            e.preventDefault();
17
18            $.ajax({
19                type: 'get',
20            url: '/api/v1/products',
21            dataType: 'json',
22            data: {
23                search: $('.js-get-val-search').val()
24            },
25        }).done(function (data) {
26                //通信成功時の処理
27                //alert(data);
28                $(".index-product").empty();
29                $(".index-product").remove();
30                var len = data.length;
31                if(len === 0){
32                    $(".js-MsArea").html('検索に一致する商品がありませんでした');
33                }else{
34                    console.log(data);
35                    $(".js-MsArea").html('検索に一致する商品がありました');
36                    for (var i = 0; i < len; i++) {
37                        $(".js-get-product").append($('<div class="index-product">'));
38                        $(".index-product").append($("<img>").attr({
39                            "src": text(data[i].pic),
40                            "class": 'index-img',
41                        }));
42                        $(".index-product").append($("<a>").text(data[i].name).attr({
43                            "class" : 'product-name',
44                            "id": 'name',
45                            "href": '{{ route('products.show', ['product' => $product->id]) }}',
46                        }));
47                    }
48                }
49        }).fail(function (data) {
50                //通信失敗時の処理
51                alert(data);
52            });
53        });
54    });
55</script>

m.ts10806

2019/07/22 06:19

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

m.ts10806

2019/07/22 06:20

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

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

回答2件

ベストアンサー

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

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

②一文字一致でも表示されてしまう

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

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

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

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

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

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

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

細かいですが：

php
1echo json_encode($products);

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

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

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

投稿2019/07/22 06:55

m.ts10806

総合スコア80850

hentaiman

2019/07/22 09:09

> 手元で直にSELECTかけてみましたが「ツ」と検索して「ッ」はヒットしていません collationの設定はどうなってますか？ > でも「ドットスカート」には「ツ」が入っていないので、なぜこれがヒットするのか不明ですね。 like binaryでcollation関係無く検索できます（多分）回答書く気無いのでここに書かせて頂きました。

m.ts10806

2019/07/22 09:25

私の場合はLaravel通さず直にMariaDBに投げたので実装が知りたいですね。

hentaiman

2019/07/22 09:37

いえ、知りたいと思ったのはmtsさんの環境のテーブル定義です。show create tableで見れるやつ。collationの部分を知りたいなーと思って。

m.ts10806

2019/07/22 10:03

単にutf8mb4でtext型で定義しただけですよ。

hentaiman

2019/07/22 10:15 編集

という事はcollationに関する事は書いてないのかな？create tableで作ったテーブルって事かなそれならデフォルトのcollationが「ツ」と「ッ」を区別する設定なんだと思いますよ、インストール後collationに関する設定をいじってないならデフォルトは区別するcollationかなーと。ところがlaravelのmigrationで作ったテーブルはデフォルトcollation使われないっぽいんですよ、なので区別されないのかなー。これらは何となく自分の環境見てみて判断しただけなので合ってるかは分かりません

m.ts10806

2019/07/22 11:45

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