teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Laravelで非同期通信

編集履歴

質問編集履歴

6

解決

2019/07/22 17:23

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -106,25 +106,4 @@
106
106
  });
107
107
  });
108
108
  </script>
109
- ```
109
+ ```
110
- ###追加(index.blade.php修正しています)
111
- ①src="{{ asset('/storage/pic/'.$product->pic) }}"部分について
112
- ```PHP
113
- $product->pic
114
- ```
115
- を使わずに、画像の表示をさせるにはどうしたらいいのでしょうか？
116
- ```PHP
117
- data[i].pic
118
- ```
119
- を使うのはわかるのですが、文法的なことだとは思いますが、asset('/storage/pic/')とdata[i].picをどのように繋げればいいのでしょうか？
120
-
121
- ②検索に一致したデータが２つなのに、３つ表示されてしまいます。
122
- console.log(data)で確認しましたが、２つ条件に一致している場合、以下の画像のように結果が表示されてしまいます。
123
- なぜこのような結果になるのか、全くわからず困っております。
124
-
125
- 検索結果
126
- ![イメージ説明](32c88d930dc1e5a322cee74c74335483.png)
127
- console.log(data)
128
- ![console.log(data)](bea206aba60c7dfa32a8a46c3493c7b2.png)
129
-
130
- 追加で申し訳ございませんが、回答よろしくお願いします。

5

説明の追加

2019/07/22 17:22

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -107,7 +107,7 @@
107
107
  });
108
108
  </script>
109
109
  ```
110
- ###追加
110
+ ###追加(index.blade.php修正しています)
111
111
  ①src="{{ asset('/storage/pic/'.$product->pic) }}"部分について
112
112
  ```PHP
113
113
  $product->pic

4

画像の追加

2019/07/22 16:20

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -108,7 +108,7 @@
108
108
  </script>
109
109
  ```
110
110
  ###追加
111
- ①
111
+ ①src="{{ asset('/storage/pic/'.$product->pic) }}"部分について
112
112
  ```PHP
113
113
  $product->pic
114
114
  ```
@@ -116,11 +116,15 @@
116
116
  ```PHP
117
117
  data[i].pic
118
118
  ```
119
- を使うのはわかるのですが、asset('/storage/pic/')とどのようにつければいいのでしょうか？
119
+ を使うのはわかるのですが、文法的なことだとは思いますが、asset('/storage/pic/')とdata[i].picをどのように繋げればいいのでしょうか？
120
120
 
121
121
  ②検索に一致したデータが２つなのに、３つ表示されてしまいます。
122
122
  console.log(data)で確認しましたが、２つ条件に一致している場合、以下の画像のように結果が表示されてしまいます。
123
123
  なぜこのような結果になるのか、全くわからず困っております。
124
+
125
+ 検索結果
124
126
  ![イメージ説明](32c88d930dc1e5a322cee74c74335483.png)
127
+ console.log(data)
128
+ ![console.log(data)](bea206aba60c7dfa32a8a46c3493c7b2.png)
125
129
 
126
130
  追加で申し訳ございませんが、回答よろしくお願いします。

3

追加

2019/07/22 16:07

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -14,7 +14,7 @@
14
14
  例）「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」（小文字でも大文字でも検索に引っかかっています）が含まれている場合でも、表示されてしまいます。
15
15
  単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。
16
16
 
17
- ③画像が最後に一致するデータのものになってしまいます（上の画像参照）
17
+ ③画像が最後に一致するデータのものになってしまいます
18
18
 
19
19
  ④商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
20
20
  ```PHP
@@ -106,4 +106,21 @@
106
106
  });
107
107
  });
108
108
  </script>
109
- ```
109
+ ```
110
+ ###追加
111
+ ①
112
+ ```PHP
113
+ $product->pic
114
+ ```
115
+ を使わずに、画像の表示をさせるにはどうしたらいいのでしょうか？
116
+ ```PHP
117
+ data[i].pic
118
+ ```
119
+ を使うのはわかるのですが、asset('/storage/pic/')とどのようにつければいいのでしょうか？
120
+
121
+ ②検索に一致したデータが２つなのに、３つ表示されてしまいます。
122
+ console.log(data)で確認しましたが、２つ条件に一致している場合、以下の画像のように結果が表示されてしまいます。
123
+ なぜこのような結果になるのか、全くわからず困っております。
124
+ ![イメージ説明](32c88d930dc1e5a322cee74c74335483.png)
125
+
126
+ 追加で申し訳ございませんが、回答よろしくお願いします。

2

追加の情報

2019/07/22 16:02

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -77,20 +77,27 @@
77
77
  },
78
78
  }).done(function (data) {
79
79
  //通信成功時の処理
80
- alert(data);
80
+ //alert(data);
81
+ $(".index-product").empty();
81
- $(".js-MsArea").html('検索に一致する商品がありました');
82
+ $(".index-product").remove();
82
83
  var len = data.length;
84
+ if(len === 0){
85
+ $(".js-MsArea").html('検索に一致する商品がありませんでした');
86
+ }else{
87
+ console.log(data);
88
+ $(".js-MsArea").html('検索に一致する商品がありました');
83
- for (var i = 0; i < len; i++) {
89
+ for (var i = 0; i < len; i++) {
84
- $('.js-remove-product').remove();
90
+ $(".js-get-product").append($('<div class="index-product">'));
85
- $('.js-get-product').append($("<a>").attr({
91
+ $(".index-product").append($("<img>").attr({
92
+ "src": text(data[i].pic),
93
+ "class": 'index-img',
94
+ }));
95
+ $(".index-product").append($("<a>").text(data[i].name).attr({
86
- "class" : 'product-name',
96
+ "class" : 'product-name',
87
- "id": 'name',
97
+ "id": 'name',
88
- "href": '{{ route('products.show', ['product' => $product->id]) }}'
98
+ "href": '{{ route('products.show', ['product' => $product->id]) }}',
89
- }));
99
+ }));
90
- $('.js-get-product').append($("<img>").attr({
91
- "src": '{{ asset('/storage/pic/'.$product->pic) }}',
92
- "class": 'index-img',
93
- }));
100
+ }
94
101
  }
95
102
  }).fail(function (data) {
96
103
  //通信失敗時の処理

1

追加情報

2019/07/22 15:54

投稿

reina0609
reina0609

スコア16

title CHANGED
File without changes
body CHANGED
@@ -6,12 +6,17 @@
6
6
 
7
7
  ①複数回検索すると、結果が付け加わって表示されてしまう。
8
8
  index.blade.phpのappendが原因なのはわかりますが、どう書き換えれば期待する結果が得られるでしょうか？
9
+ 例）①ニットと検索→②もう一度ニットと検索
10
+ ![①ニットと検索](109687aba185d4a483ade3b25dfdfe89.png)
11
+ ![②もう一度ニットと検索](5f5baa4e1af298b40a563697c666511a.png)
9
12
 
10
13
  ②一文字一致でも表示されてしまう
11
- 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」が含まれている場合でも、表示されてしまいます。
14
+ 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」（小文字でも大文字でも検索に引っかかっています）が含まれている場合でも、表示されてしまいます。
12
15
  単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。
13
16
 
17
+ ③画像が最後に一致するデータのものになってしまいます（上の画像参照）
18
+
14
- ③商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
19
+ ④商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
15
20
  ```PHP
16
21
  $(".js-MsArea").html('検索に一致する商品がありませんでした');
17
22
  ```