Live search of products was added

Vilgefortzz · May 27, 2017 · ea18493 · ea18493
1 parent ea5cf01
commit ea18493
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 1 deletion.
diff --git a/app/Http/Controllers/ProductController.php b/app/Http/Controllers/ProductController.php
@@ -30,4 +30,30 @@ public function show(Product $product){
 
         return view('products.product_details', compact('product', 'reviews'));
     }
+
+    public function search(Request $request){
+
+        if ($request->ajax()){
+
+            $output = '';
+            $products = Product::where('name', 'LIKE', $request->value.'%')->get();
+
+            if (count($products) != 0){
+                foreach ($products as $product){
+
+                    $output .= '<li>'.
+                                '<a href="/products/'.$product->id.'" class = "nice_links">'.
+                                    '<img src="'.$product->path_to_image.'" width="50" height="50">'.
+                                    '<b>'.$product->name.'</b>'.
+                                '</a>'.
+                               '</li>';
+                }
+            }
+            else{
+                $output = '<h4 class="text-center">Product not found...</h4>';
+            }
+
+            return response($output);
+        }
+    }
 }
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
@@ -11243,6 +11243,7 @@ var app = new Vue({
 __webpack_require__(34);
 __webpack_require__(33);
 __webpack_require__(31);
+__webpack_require__(51);
 
 /**
  * Active tooltip - show etc.
@@ -41168,5 +41169,49 @@ __webpack_require__(10);
 module.exports = __webpack_require__(11);
 
 
+/***/ }),
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */,
+/* 50 */,
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
+
+/* WEBPACK VAR INJECTION */(function($) {$(function () {
+
+    $('#search_link').on('click', function (e) {
+        e.preventDefault();
+
+        $('#search_input').val('');
+        setTimeout(function () {
+            $('#search_input').focus();
+        }, 10);
+        $('#searched_products').empty();
+    });
+
+    $('#search_input').on('keyup', function () {
+
+        var value = $(this).val();
+        var url = $(this).attr('href');
+
+        if (value !== '') {
+            $.ajax({
+                type: 'GET',
+                url: url,
+                data: { value: value },
+
+                success: function success(data) {
+                    $('#searched_products').html(data);
+                }
+            });
+        } else $('#searched_products').empty();
+    });
+});
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
+
 /***/ })
 /******/ ]);
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -26,6 +26,7 @@ const app = new Vue({
 require('./hover_menu');
 require('./hide_flash_messages');
 require('./ajax_config');
+require('./search');
 
 /**
  * Active tooltip - show etc.

diff --git a/resources/assets/js/search.js b/resources/assets/js/search.js
@@ -0,0 +1,30 @@
+$(function() {
+
+    $('#search_link').on('click', function(e) {
+        e.preventDefault();
+
+        $('#search_input').val('');
+        setTimeout(function(){$('#search_input').focus();}, 10);
+        $('#searched_products').empty();
+    });
+
+    $('#search_input').on('keyup', function () {
+
+        var value = $(this).val();
+        var url = $(this).attr('href');
+
+        if (value !== ''){
+            $.ajax({
+                type: 'GET',
+                url: url,
+                data: {value : value},
+
+                success: function (data) {
+                    $('#searched_products').html(data);
+                }
+            });
+        }
+        else
+            $('#searched_products').empty();
+    })
+});
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -539,4 +539,8 @@ body{
 }
 .panel-order .panel-deading {
   margin-bottom: 0;
+}
+
+#search_menu{
+  width: 300px !important;
 }
diff --git a/resources/views/layouts/nav_bar.blade.php b/resources/views/layouts/nav_bar.blade.php
@@ -135,6 +135,20 @@
                         </ul>
                     </li>
                 @endif
+
+            <!-- Search products -->
+                <li id="search_section" class="dropdown">
+                    <a id="search_link" href="#toogle-search" class="dropdown-toggle" data-toggle="dropdown">
+                        <span class="glyphicon glyphicon-search"></span>
+                    </a>
+
+                    <ul id="search_menu" class="dropdown-menu" role="menu">
+                        <li style="margin-bottom: 15px">
+                            <input id="search_input" type="text" name="search" href="{{ url('/products/search') }}" class="form-control" placeholder="Type here to search product..." style="border: none;">
+                        </li>
+                        <div id="searched_products"></div>
+                    </ul>
+                </li>
             </ul>
         </div>
     </div>

diff --git a/routes/web.php b/routes/web.php
@@ -93,6 +93,11 @@
  */
 Route::group(['prefix' => 'products'], function () {
 
+    /**
+     * Search products
+     */
+    Route::get('/search', 'ProductController@search');
+
     Route::get('/{product}', 'ProductController@show');
 });