Xem 18,711
Cập nhật nội dung chi tiết về Xây Dựng Chức Năng Tìm Kiếm Thông Minh Trong Laravel Với Typeahead.js mới nhất ngày 20/05/2022 trên website Photomarathonasia.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến nay, bài viết này đã thu hút được 18,711 lượt xem.
--- Bài mới hơn ---
Chào mọi người, đến hẹn lại lên (hehe).
Thì như mọi người cũng đã biết, tìm kiếm là một chức năng quan trọng và không thể thiếu trong các ứng dụng Website. Đặc biệt trong các ứng dụng lớn, các chức năng như tìm kiếm thông minh từ những từ khóa đã nhập vào, gợi ý từ khóa tìm kiếm, … là những chức năng không thể thiếu.
Chính vì vậy, trong bài viết này mình sẽ giới thiệu cho các bạn về Typeahead.js. Đây là một thư viện JavaScript linh hoạt, nó hỗ trợ mạnh mẽ cho việc xây dựng một hệ thống tìm kiếm thông minh tương tự như tìm kiếm trên Google, Facebook hay Twitter.
Typeahead gồm 2 thành phần chính là:
-
Typeahead: Là phần hiển thị giao diện người dùng- Hiển thị gợi ý cho người dùng sau khi nhập từ khóa.
- Hiển thị các gợi ý từ khóa trên ô nhập dữ liệu.
- In đậm các từ, các chữ trùng với từ khóa đã nhập.
- Hỗ trợ các tùy chỉnh về giao diện, sự kiện linh hoạt.
- ……
-
Bloodhound Engine: Là một Bộ máy gợi ý- Lấy các dữ liệu từ trước, giảm độ delay khi hiển thị gợi ý.
- Sử dụng Local Storage giảm số lượng các request đến máy chủ.
- Cho phép các dữ liệu được hardcode.
- Sử dụng rate limit và bộ đệm cho các request đến máy chủ, giảm nhẹ việc tải dữ liệu.
- …..
Npm
Chạy lệnh sau để cài đặt:
CDN
Đây là link cdn cho các bạn muốn nhúng thẳng Typeahead vào ứng dụng của mình https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js
Chú ý: Typeahead yêu cầu phiên bản jquery từ 1.9 trở lên.
Để khởi tạo Typeahead với bất kể trường text input nào, ta sử dụng đoạn code sau:
Trong đó:
Đối với source trong datasets, chúng ta cần lấy dữ liệu từ server. Để làm việc này chúng ta cần BloodHound. Nó là bộ máy gợi ý của Typeahead.js, nó đưa ra nhiều tính năng nâng cao để lấy dữ liệu từ xa, đồng thời sử dụng bộ đệm để tăng tốc.
Bạn cần chú ý rằng đường dẫn /search/name sẽ được thiết lập trong route, và value sẽ là tham số truyền đến controller của ứng dụng Laravel (ở phần dưới). Như vậy chúng ta đã có dữ liệu và có thể dùng để thiết lập cho source trong datasets của Typeahead.
Typeahead cho phép bạn sử dụng các templates để thay đổi style cho các gợi ý, bạn cũng có thể sử dụng Bootstrap ở đây.
Migration & Seeder
Ở đây chúng ta sẽ tạo một table students với các thuộc tính name, email và studentcode. Tạo một Migration như sau:
Chúng ta sẽ seeding 20,000 dữ liệu mẫu để testing cho ứng dụng. Sử dụng Faker để seeding, bạn hãy copy đoạn code sau và dán vào file databases/factories/UserFactory.php:
Tạo một seeder với tên là StudentsTableSeeder bằng lệnh:
php artisan make:seeder StudentsTableSeeder
Và thêm đoạn code sau vào file databases/seeds/StudentsTableSeeder.php vừa tạo.
Đăng ký seeder vừa tạo vào trong file databases/seeds/DatabaseSeeder.php
Cuối cùng chạy migration và seeder đã tạo bằng lệnh:
php artisan migrate --seed
Route
Chúng ta sẽ tạo 1 route để hiển thị trang tìm kiếm, 1 route để hiển thị thông tin student và 2 route để thực hiện việc tìm kiếm student theo name , theo email và trả dữ liệu dạng JSON về cho Bloodhound . Bạn hãy copy đoạn code sau và dán vào file routes/web.php:
Controller
Tạo một controller với tên là StudentController bằng lệnh:
php artisan make:controller StudentController
Thêm các phương thức index(), show(), searchByName() và searchByEmail() vào StudentController vừa tạo.
View
Chúng ta sẽ tạo một View index đơn giản với 1 ô input tìm kiếm. Ta cần include thư viện Typeahead vào phần header của View. Ở đây mình sẽ viết code Css và Javascript trong view cho thuận tiện, tuy nhiên các bạn nên tách ra file riêng để dễ dàng cho việc quản lý.
Tuy với 20,000 dữ liệu nhưng tốc độ tìm kiếm của Typeahead khá nhanh.
Qua bài viết này mình đã giới thiệu cho các bạn về Typeahead.js. Một thư viện hỗ trợ linh hoạt cho việc xây dựng một hệ thống tìm kiếm thông minh.
https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options https://scotch.io/tutorials/implementing-smart-search-with-laravel-and-typeahead-js
All Rights Reserved
--- Bài cũ hơn ---
Bạn đang đọc nội dung bài viết Xây Dựng Chức Năng Tìm Kiếm Thông Minh Trong Laravel Với Typeahead.js trên website Photomarathonasia.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!
