###前提
商品(画像やタイトル)を持ったAPIの実装をしています。
Laravelと検索機能は、Ajax(jQuery)を使っています。
###困っていること(検索機能(Ajax))
①複数回検索すると、結果が付け加わって表示されてしまう。
index.blade.phpのappendが原因なのはわかりますが、どう書き換えれば期待する結果が得られるでしょうか?
例)①ニットと検索→②もう一度ニットと検索
②一文字一致でも表示されてしまう
例)「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」(小文字でも大文字でも検索に引っかかっています)が含まれている場合でも、表示されてしまいます。
単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。
③画像が最後に一致するデータのものになってしまいます
④商品が1つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
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>
回答2件
あなたの回答
tips
プレビュー