Bài viết này sẽ chỉ cho bạn cách để tạo ra một hệ thống lọc đơn giản để sử dụng cho Live Search chỉ với một vài dòng code. Với kỹ thuật này bạn có thể áp dụng khi Lập trình web - rất đơn giản nhưng hiệu quả, chúng ta hãy cùng bắt đầu nào!
Thêm vào plugin tìm kiếm trực tiếp
Với hướng dẫn này, chúng ta sẽ sử dụng HideSeek- là một jQuery plugin đơn giản, chưa có chỉnh sửa cho việc Live search - tương thích với IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0 và thông qua các thuộc tính dữ liệu và tùy chỉnh sự kiện sẽ có thêm các tính năng như tô sáng ký tự, tùy chỉnh thông báo, chuyển hướng.
Việc cấu hình cũng khá là đơn giản, chỉ là:
Về cơ bản bạn cần phải khai báo id, lớp[class] hoặc tất cả những gì cần cho dữ liệu input trong trường hợp dữ liệu input là nội dung tìm kiếm.
Đây là cách miêu tả dữ liệu input cần tìm:
Bạn hãy nhìn ở đây data-list=”.sorting_list”. Đó chính là nơi chúng ta xác định tập dữ liệu nguồn sẽ được.
Danh sách này bao gồm một số hình ảnh và văn bản.
Mã lệnh HTML rất đơn giản, không có gì phức tạp.
Hoạt động của đoạn code tương đối đơn giản và dễ hiểu. Nếu bạn gõ từ “Thầy Cô” vào dữ liệu đầu vào search thì bạn sẽ có thấy kết quả tìm kiếm là hình ảnh Thầy Cô và những văn bản liên quan.
Bây giờ đến với phần thú vị: Một hệ thống lọc dựa trên nột dung cần tìm kiếm của dữ liệu input
Như những gì bạn thấy, trong ảnh chụp màn hình phía trên chúng ta có một số đường liên kết như “Thầy Cô”, “Trường Học”, “Bạn bè”.
Tiếp theo, chúng ta cần tạo ra những từ khóa hoạt động như những bộ lọc. Ví du: khi chúng ta chọn “Bạn bè” thì dữ liệu đầu vào search sẽ được điền bằng từ khóa “Bạn bè”.
Chúng ta cũng có “View all” – chắc bạn cũng biết chức năng của nó là gì đúng không?
The magic:
Đầu tiên ta phải chắc chắn nếu người dùng nhấn chọn vào đường liên kết mà có tên lớp là “clear” thì ta sẽ xóa dữ liệu input search và chúng ta sẽ có tất cả dữ liệu
Kế đến ta phải kiểm tra nếu ấn chọn đường liên kết có tên lớp là “filter” thì ta sẽ thêm vô đầu vào dữ liệu search từ khóa tương ứng.
Nó thực đơn giản, đúng không?
Bây giờ chúng ta đã có một hệ thống lọc đầy đủ chức năng chỉ với vài dòng code. Bạn không cần phải thêm vào các plugin có đầy ấp chức năng có dung lượng lớn nếu bạn chỉ cần vài chức năng đơn giản.
Chỉ thế thôi! Chúng ta đã vừa xây dựng ra một một bộ lọc nội dung nhanh và đơn giản bằng cách sử dụng jQuerry plugin tìm kiếm trực tiếp.
Tài hướng dẫn viết code tại đây
Tổng hợp từ medium.com
Ngày nay đối với mọi trang web dù là blog hay website thương mại, một thanh tìm kiếm luôn luôn là cần thiết. Tuy nhiên những ngày tháng của một thanh tìm kiếm theo cách đơn giản đã qua. Hiện nay một thanh tìm kiếm live, tức là có thể hiển thị kết quả tìm tiếm tức thì khiến cho quá trình sử dụng của người dùng dễ dàng hơn rất nhiều. Hôm nay mình sẽ hướng dẫn các bạn tạo một thanh live search trong Laravel sử dụng Ajax.
Thiết lập thông tin database trong .env
Truy cập vào file .env trong project của bạn và thiết lập thông tin của file .env tại phần database như sau:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database.name
DB_USERNAME=database.username
DB_PASSWORD=database.password
Với database.name, database.username, database.password lần lượt là tên của cơ sở dữ liệu, tên của người dùng và mật khẩu truy cập cơ sở dữ liệu.
Tạo migration
Giờ chúng ta cần tạo một bảng để lưu trữ dữ liệu, sử dụng câu lệnh sau để tạo một migration, ở đây mình tạo một bảng có tên là 'products'
php artisan make:migration create_products_table --create=products
Sau khi chạy xong câu lệnh migration, bạn sẽ thấy một file mới được tạo ở database/migration/_create_products_table.php
Mình sẽ thêm một số trường cho bảng này, ở đây mình sẽ dùng trường 'title' để tìm kiếm.