Implementing Product Search Functionality with Suggestions

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video focuses on making the product search box functional by implementing both the backend search API and the frontend AJAX logic for displaying live search suggestions.

1. Create the `search` Function in `HomeController`

   Open your `HomeController.php` and create the `search` function. This function handles the AJAX request, takes a `query` string, and returns products whose names match the query using a `LIKE` operator.

   public function search(Request $request)
   {
       $query = $request->input("query");        
       // Search for products where the name contains the query string
       $results = Product::where("name", "LIKE", "%{$query}%")->get();
       
       // Return the results as a JSON response
       return response()->json($results);
   }
   

2. Define the Search Route

   In `web.php`, define the GET route that points to the new `search` function:

   Route::get("/search",[HomeController::class,"search"])->name("home.search");
   




3. Add Frontend Search Logic (JavaScript/jQuery)

   Open your main application layout file (e.g., `app-layout.blade.php` or a relevant script file) and add the jQuery code to handle the live search functionality. This script listens for key-up events in the search input and makes an AJAX call.

   $(document).ready(function() {
       $("#search").on("keyup", function() {
           let query = $(this).val();
           if (query.length > 2) {
               $.ajax({
                   url: "{{ route("home.search") }}",
                   method: "GET",
                   data: {
                       query: query
                   },
                   success: function(data) {
                       $("#suggestions").empty(); // Clear previous suggestions
                       $.each(data, function(index, item) {
                           // Append each product as a clickable list item
                           $("#suggestions").append(
                               `<li data-name="${item.name}">
                                   <a href="/shop/product/details/${item.slug}">
                                       <img src="/uploads/products/${item.image}" width="50" height="50" alt="${item.name}" />
                                       <span>${item.name}</span>
                                   </a>
                                </li>`
                           );
                       });
                   }
               });
           } else {
               $("#suggestions").empty(); // Clear if query is too short
           }
       });
       // Handle click on a suggestion item to submit the form/navigate
       $("#suggestions").on("click", "li", function() {
           // This is primarily for navigation via the <a> tag inside <li>
           // The original code uses a simplified click that submits the form.
           // Let'sensure navigation works via the <a> tag defined in the success function.
           // For simple form submission on click:
           // $("#search").val($(this).data("name")); 
           // $("#suggestions").empty(); 
           // $("#search-form").submit();
       });
       // Hide suggestions when clicking outside
       $(document).click(function(e) {
           if (!$(e.target).closest("#search-form").length) {
               $("#suggestions").empty();
           }
       });
   });
   

4. Update the Search Form HTML

   Ensure your header/navbar contains the correct HTML structure for the search form, including the input, the form action, and the unordered list for suggestions.

   <div class="dropdown-menu dropdown-search">
       <div class="header-search">
           <form action="{{ route("shop.index") }}" id="search-form">
               <input type="text" id="search" name="search" placeholder="Search for products ..." autocomplete="off" />
               <button>
                   <i class="pe-7s-search"></i>
               </button>
               <ul id="suggestions"></ul> <!-- The list for live search results -->
           </form>
       </div>
   </div>
   

Verification and Testing 🔎

Refresh the home page. When you type more than two characters in the search box in the header, an AJAX request should be sent to the backend, and the matching product names should appear instantly beneath the search input. Clicking a suggestion should take the user to the corresponding product details page.