Various solutions of autocomplete

Dân làm web chắc đều biết tính năng autocomplete lợi hại như thế cho các ô nhập liệu hoặc ô tìm kiếm.

Trong bài post này, tôi xin giới thiệu các công cụ có thể giúp cho công việc này đỡ vất vả.

Dùng cách truyền thống
Dùng listjs
Dùng select2
Dùng backbone và underscore kết hợp
Dùng AngularJS

Và sau đây là những ví dụ minh họa cho mỗi cách đó.

Dùng cách truyền thống

Đây là một trong những tính năng autoComplete của jQuery jQuery autocomplete. Có thể sử dụng chức năng autocomplete của jQuery như ví dụ này utocomplete with PHP, MySQL and Jquery UI - David Carr | Web Developer, nhưng bạn cũng có thể dùng thư viện jQuery viết lại như cái link ban đầu. Thêm một vài ví dụ viết tương tự theo cách này sau đây:

Dùng listjs

Bạn có thể tham khảo ứng dụng mình đang viết ở đây: Model Search, chức năng autocomplete thể hiện trên các ô tìm kiếm của faceted search. Công nghệ bên dưới là jQuery, bản chất là search text/string và cách tìm kiếm dựa trên những selector được định nghĩa trước qua những css classes. Đi theo cách này có một số thư viện như:

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Với Select2

Giới thiệu một chút về Select2: Select2 - The jQuery replacement for select boxes, có nhiều ví dụ cung cấp trên trang chủ, xem ở link này: Examples - Select2

Đầu là bạn cần phải khai báo thư viện Select2 để được tải về lúc nạp trang web của bạn.
Kế tiếp là bạn định nghĩa một ô nhập liệu (textbox/input) hoặc ô chọn (dropdown box)

Đặc biệt, nếu chúng ta muốn sử dụng Select2 với CodeIgniter, have a look at the tutorial Codeigniter 3 - select2 ajax autocomplete from database example with demo

Với sự kết hợp backbone và underscore

Cũng trong dự án mình đang làm, những tính năng như tìm kiếm người dùng để thêm vào một nhóm, tìm kiếm collaborator để chia sẻ model... đều đang được cài đặt dựa trên backbone và underscore.

Dùng AngularJS với tính năng filter

Nếu bạn đã từng sử dụng AngluarJS để phát triển web, filter cực kì hữu dụng để search thông tin.

Tham khảo:

http://jsfiddle.net/user/nvntung/fiddles/