Admin: Implementing Product Search Functionality

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video focuses on implementing the live search functionality for products within the Admin Panel, similar to the frontend search, allowing administrators to quickly find and navigate to product records.

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

   Open your `AdminController.php` and create the `search` function. This function handles the AJAX request from the admin search bar. It queries the database for products whose names match the input query and returns the results as JSON.

   public function search(Request $request)
   {
       $query = $request->input("query");        
       // Retrieve products matching the search query
       $results = Product::where("name", "LIKE", "%{$query}%")->get();
       return response()->json($results);
   }
   

2. Define the Admin Search Route

   In `web.php`, create the route for the AJAX search endpoint, ensuring it is within the admin group or protected route middleware:

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




3. Add Frontend AJAX Logic (JavaScript/jQuery)

   In your admin layout file or script section, add the JavaScript logic. This code listens for input in the search box, makes an AJAX call to the defined route, and populates the `#suggestions` list with clickable product names.

   @push("scripts")
   <script>
       $(document).ready(function() {
           $("#search").on("keyup", function() {
               let query = $(this).val();
               if (query.length > 2) {
                   $.ajax({
                       url: "{{ route("admin.search") }}",
                       method: "GET",
                       data: {
                           query: query
                       },
                       success: function(data) {
                           $("#suggestions").empty();
                           $.each(data, function(index, item) {
                               $("#suggestions").append(
                                   // Link to the admin product edit page
                                   `<li data-name="${item.name}">
                                       <a href="/admin/product/edit/${item.id}"> 
                                           <span>${item.name}</span> 
                                       </a>
                                   </li>`
                               );
                           });
                       }
                   });
               } else {
                   $("#suggestions").empty();
               }
           });
           // Handle click on suggestion list item to fill search box and submit form
           $(document).on("click", "#suggestions li", function() {
               let selectedText = $(this).data("name");
               
               // Set search box value
               $("#search").val(selectedText);
               
               // Clear suggestions
               $("#suggestions").empty();
               
               // Submit the form (which leads to the main product index page with the search query)
               $("#search-form").submit();
           });
           // Hide suggestions when clicking outside the search area
           $(document).click(function(e) {
               if (!$(e.target).closest("#search-form").length) {
                   $("#suggestions").empty();
               }
           });
       });
   </script>
   @endpush
   

4. Update the Admin Search Form HTML

   Ensure the HTML structure in your admin layout file (where the search bar is located) includes the correct IDs (`#search` and `#suggestions`) and sets the form'saction to redirect to the main product listing page (`admin.products`).

   <div class="serach_field-area d-flex align-items-center">
       <div class="search_inner">
           <form action="{{ route("admin.products") }}" id="search-form">
               <div class="search_field">
                   <input type="text" id="search" name="search" placeholder="Search for products ..." autocomplete="off">
               </div>
               <button type="submit">
                   <img src="{{ asset("assets-adm/img/icon/icon_search.svg") }}" alt="">
               </button>
               <ul id="suggestions"></ul> <!-- Container for AJAX suggestions -->
           </form>
       </div>
   </div>
   

Verification and Testing 🔍

Log into the Admin Panel. When typing a product name in the search bar, products that match the query will appear in a live list underneath. Clicking on a suggestion should either navigate directly to the product'sedit page or fill the search box and submit the form to filter the product listing.