[Học Laravel] Sử dụng Ajax làm chức năng tìm kiếm trong Laravel

Chức năng tìm kiếm sử dụng Ajax được rất nhiều các trang Web sử dụng, việc sử dụng ajax cho chức năng tìm kiếm rất tiện lợi – giúp kết quả tìm kiếm được hiển thị mà không cần load lại trang Web. Vì vậy trong bài viết này WebFree.Net sẽ hướng dẫn các bạn làm chức năng tìm kiếm sử dụng Ajax trong Laravel.

Chức năng tìm kiếm sử dụng Ajax được rất nhiều các trang Web sử dụng, việc sử dụng ajax cho chức năng tìm kiếm rất tiện lợi – giúp kết quả tìm kiếm được hiển thị mà không cần load lại trang Web. Vì vậy trong bài viết này WebFree.Net sẽ hướng dẫn các bạn làm chức năng tìm kiếm sử dụng Ajax trong Laravel.

Tạo bảng dữ liệu để tìm kiếm.

Tạo bảng với migrate.

Tất nhiên rồi, tìm kiếm thì cần có bảng dữ liệu để tìm kiếm. Chúng ta tạo bảng có tên là products

php artisan make:migration products --create=products

Các bạn vào database và mở file database/migrations/…products.php lên và chèn đoạn code sau:

increments('id');
           $table->string('name_product');
           $table->timestamps();
       });
   }

   /**
    * Reverse the migrations.
    *
    * @return void
    */
   public function down()
   {
       Schema::dropIfExists('products');
   }
}

Chúng ta tạo trường ‘name_product‘ để tìm kiếm với nó các bạn thích tìm kiếm với trường nào thì thêm vào và có thể thêm tùy ý miễn là chú ý khi truy vấn dữ liệu để không bị nhầm tên là được. Bây giờ các bạn tạo bảng với câu lệnh.

php artisan migrate

Chú ý là để chạy migrate nhớ cấu hình cho file .env và tạo tên database tương ứng nhé

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=shop
DB_USERNAME=root
DB_PASSWORD=

Tên database là ‘shop’ còn các bạn có thể tạo database khác và kết nối cho đúng là được.

Tạo dữ liệu mẫu với seeder

Để tạo dữ liệu mẫu chúng ta có thể tạo trực tiếp trong cơ sở dữ liệu hoặc sử dung seeder. Câu lệnh tạo seeder.

php artisan make:seeder ProductTableSeeder

Vào seeds mở file vừa tạo lên để thêm dữ liệu mẫu vào.

'iPhone',
           ],
           [
               'name_product'=>'Samsung',
           ],
           [
               'name_product'=>'HTC',
           ],
           [
               'name_product'=>'Huawei',
           ],
           [
               'name_product'=>'Oppo',
           ],
       ];
       DB::table('products')->insert($data);
   }
}

Giờ chạy seeder nào.

php artisan db:seed --class=ProductTableSeeder

Tạo routes.

Vào web.php thêm hai routes như sau.

Route::get('search', '[email protected]');
Route::post('search/name', '[email protected]')->name('search');

Tạo Controller.

Có routes rồi thì phải tạo controller để chạy chứ đúng không nào. Lệnh tạo controller, ở đây chúng ta tạo controller có tên là ‘SearchController‘ các bạn có thể đặt tên khác tùy thích nhưng phải trùng với route nhé.

php artisan make:controller SearchController

Tạo view.

Vào view và tạo một view với tên là ‘searchajax.blade.php‘ và tạo dao diện search như sau.

  

   
Gợi ý tìm kiếm với ajax


    


  
  {{ csrf_field() }}

Chúng ta bắt đầu chạy thử xem đã hiển thị được view searchajax.blade.php chưa.

Gợi ý tìm kiếm với ajax.

Bây giờ mới đến phần chính. Trong view thêm đoạn code ajax để tìm kiếm và hiển thị như sau.

  

   
Gợi ý tìm kiếm với ajax


    


  
  {{ csrf_field() }}

Bây giờ bên controller sẽ sử lý khi nhận được dữ liệu.

get('query'))
        {
            $query = $request->get('query');
            $data = DB::table('products')
            ->where('name_product', 'LIKE', "%{$query}%")
            ->get();
            $output = '
';
            foreach($data as $row)
            {
               $output .= '
               
'.$row->name_product.'
               ';
           }
           $output .= '
';
           echo $output;
       }
    }
}

vậy là ok rồi đấy.

Lưu ý:

Có thể chỉnh sửa hiển thị tùy ý bằng cấu hình trong controller như thêm đường dẫn, hiển thị thêm ảnh, tên, … Thậm chí còn css được, ví dụ:

 $output = '
';
           foreach($data as $row)
           {
              $output .= '
              
'.$row->name_product.'
              
abc
              ';
          }
          $output .= '
';

Bạn có thể trả về dữ liệu kiểu json và đọc json đấy bên code của ajax bằng cách trả về kiểu dữ liệu json thay vì kiểu html vd: return response()->json($products);

Kết luận

Vậy là WebFree.Net đã hướng dẫn xong gợi ý tìm kiếm với ajax trong Laravel, hy vọng các bạn đọc và làm theo thành công. Hãy để lại bình luận nếu bài viết có ích cho bạn. Chúc các bạn thành công!.

Tài liệu tham khảo

https://viblo.asia/p/goi-y-tim-kiem-voi-ajax-trong-laravel-XL6lAxVrZek