[Học lập trình] Kỹ thuật tìm kiếm Live Search trên jQuery

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!

 

 

 

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.

 

 

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.

 

 

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.

 

Bạn xem demo tại đây.

 

Tài hướng dẫn viết code tại đây

 

Tổng hợp từ medium.com