Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thư Viện Autocomplete Javascript Năm 2020

Những Thư Viện Autocomplete Javascript Năm 2020


Ngày 19 Tháng 6 Năm 2020

Trong bài này mình sẽ giới thiệu đến bạn một số thư viện autocomplete được sử dụng phổ biến trong năm 2020. Nào chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Autocomplete Là Gì?

Đây là một tính năng hay thường được sử dụng với form trong HTML. Nó giúp bạn có thể đưa ra các gợi ý thông qua các chữ mà người dùng nhập vào trong ô input. Theo mình thấy nó khá hữu ích trong việc giảm bớt thời gian cũng như tăng trải nghiệm người dùng khi sử dụng trang web của bạn.

Để bạn dễ hình dùng được chức năng autocomplete thì mình xin lấy một ví dụ sau đây để minh họa nhé:

Ví dụ về autocomplete

Các Thư Viện Autocomplete Dành Cho Lập Trình Viên:

Awesomplete là một thư viện mã nguồn mở với kích thước chỉ khoảng 2Kb (sau khi nén) giúp bạn tạo tính năng autocomplete cho trang web mà không cần thêm thư viện bổ sung nào. Trước khi sử dụng thì bạn cần phải tải 2 file là awesomplete.cssawesomplete.js. Sau đó bạn chỉ cần gọi class awesomplete và thêm data-list="ID danh sách của bạn" cho ô input là có thể sử dụng được rồi. Điểm mình thích là khả năng mở rộng của nó cũng rất dễ dàng thông qua thiết lập thuộc tính cho đối tượng HTML như là data-minchars: sau bao nhiêu từ người dùng nhập vào sẽ hiển thị gợi ý, data-maxitems: số phần tử mà danh sách gợi ý có thể chứa... Ngoài ra nó cũng có các gợi ý bằng dropdown, lấy gợi ý thông qua Ajax... phần này bạn xem ở trang demo nhé!

Awesomplete

Horsey là một thư viện mã nguồn mở giúp bạn tạo tính năng autocomplete một cách nhanh chóng cũng như dễ dàng thiết lập cho trang web. Bạn có thể sử dụng cho nhiều loại trang web khác nhau với nhiều tính năng hữu ích như là tải gợi ý thông qua Ajax, dùng từ khóa gợi ý, giới hạn số lượng gợi ý cho người dùng, sử dụng dropdown để hiển thị gợi ý... Nó chạy được trên hầu hết các trình duyệt phổ biến hiện nay và đối với với IE thì từ IE7+ trở lên nhé.

Horsey

autoComplete.js là một thư viện được xây dựng javascript thuần giúp bạn tạo tính năng autocomplete một cách dễ dàng cũng như tối ưu về hiệu suất cho trang web. Với tính năng tùy biến cao, không có thêm thư viện bổ sung nào, kích thước nhỏ gọn, đơn giản, dễ sử dụng thì mình nghĩ đây là một thư viện tốt dành cho trang web của bạn. Ngoài ra nó cũng có một số tính hữu ích khác khi bạn thiết lập tính năng như là chế độ tìm kiếm, hightlight từ khóa tìm kiếm, xác định bao nhiêu kết quả hiển thị...

autoComplete.js

typeahead.js là một thư viện xây dựng tính năng autocomplete bằng javascript được lấy cảm hứng từ chức năng tìm kiếm ở trên mạng xã hội Twitter. Nó có hai thư viện chính là Bloodhound dùng để xử lý tính toán các để xuất cho người dùng và UI component hiển thị các đề xuất và tương tác với DOM. Phần giới thiệu này mình chỉ sẽ tập trung phần giao diện còn nếu bạn muốn tham khảo thêm thì có thể xem ở trang Github của nó nhé typeahead.js. Thư viện này có nhiều tính năng hữu ích như là hiện thị gợi ý theo từng nhóm, thêm gợi ý mặc định, dễ dàng tinh chỉnh lại giao diện cho các đề xuất...

typeahead.js

Algolia Places là một thư viện Javascript giúp chúng ta tạo tính năng hiển thị các đề xuất cho người dùng khi tìm kiếm một ví trí nào đó một cách nhanh chóng và dễ dàng. Nó sẽ tự động đưa ra các gợi ý về địa chỉ, thành phố, đất nước... mỗi khi bạn nhập vào ô input. Điểm mình thích nhất ở nó là chúng ta có thể thiết lập gợi ý địa điểm thông qua bản đồ thời gian thực mà thư viện cung cấp giúp người dùng dễ hình dung và có cái nhìn trực quan hơn. Tuy vậy nó cũng có một điểm hạn chế là nếu bạn muốn sử dụng thì cần đăng ký để nhận API giúp truy cập vào dữ liệu thông tin của thư viện. Và với phiên bản miễn phí thì chúng ta sẽ được 100,000 requests/ tháng. Nếu bạn muốn sử dụng thêm thì giá sẽ là 0.4$ cho 1000 requests.

Algolia Places

autoComplete là một thư viện Javascript nhỏ gọn và hiệu quả giúp bạn tạo tính năng autocomplete một cách dễ dàng cho trang web. Với kích thước chỉ khoảng 5.4kb và được viết bằng javascript thuần nên bạn có thể áp dụng cho nhiều loại trang web khác nhau. Nó cung cấp một số tính năng hữu ích như là giới hạn số lượng từ tối thiểu, thiết lập delay cho hiển thị đề xuất, thay đổi cách thức tìm kiếm cũng như thiết lập style cho các gợi ý thông qua thuộc tính renderItem... Bạn có thể xem các ví dụ cụ thể ở trang chính của thư viện để tham khảo thêm nhé!

autoComplete

Accessible Autocomplete là một thư viện Javascript tạo ra tính năng autocomplete với tiêu chỉ là tăng trải nghiệm cho người dùng, hỗ trợ trên nhiều thiết bị, trình duyệt khác nhau và dễ dàng thiết lập cho trang web. Bạn chỉ cần file accessible-autocomplete.min.js và sau đó thiết lập tính năng cho trang web thông qua việc khai báo 3 thuộc tính cơ bản cơ bản là element: đối tượng trong trang HTML, id: id của lable và source: nguồn thông tin gợi ý. Ngoài ra nó cũng có thêm một số tính năng như là giới hạn số lượng gợi ý, thêm placeholder cho ô input, tự động chọn gợi ý... những thuộc tính này đều có ví dụ ở trang example của nó nhé!

Accessible Autocomplete

AutoJS là thư viện mã nguồn mở được xây dựng bằng javascript giúp chúng ta có thể đưa ra các từ gợi ý trong quá trình người dùng nhập liệu thông qua một từ điển chuẩn được phát triển dựa trên các nghiên cứu và phương pháp ngôn ngữ. Hiện tại theo mình thấy thì nó chỉ sử dụng cho tiếng anh thôi nhé với kích thước tiêu chuẩn khoảng 17kb (chứa hơn 10.000 từ). Ngoài ra nó còn có hai phiên bản khác là micro (chứa khoảng 1500 từ) và maximum (chứa khoảng 32.000 từ). Bạn chỉ cần tải file về và khởi tạo nó bằng đoạn mã javascript là có thể sử dụng rồi nhé!

AutoJS

email-autocomplete là thư viện mã nguồn mở được xây dựng bằng jquery giúp bạn xây dựng tính năng gợi ý tên miền email cho người dùng. Ví dụ khi bạn nhập là [email protected] thì chương trình sẽ tự động gợi ý là [email protected]. Thật tiện lợi phải không nào. Bạn cũng có dễ dàng thiết lập style màu chữ cho từ gợi ý trong ô input thông qua class .eac-sugg. Ngoài ra nếu bạn muốn xem các tên miền email hay được sử dụng phổ biến thì có thể tham khảo ở trang github của nó nhé.

email-autocomplete

Ajax AutoComplete for jQuery là thư viện mã nguồn mở được xây dựng bằng jquery giúp bạn dễ dàng tạo tính năng autocomplete cho trang web của mình. Nó chỉ sử dụng thư viện bổ sung là Jquery với kích thước sau khi được nén chỉ khoảng 2.7kb. Nó cũng có một số tính năng giúp bạn có thể điều chỉnh phù hợp cho trang web của mình như là gợi ý đề xuất thông qua Ajax, giới hạn chiều cao của các gợi ý, vị trí hiển thị gợi ý, số lượng kết quả đề xuất muốn hiển thị...

Ajax AutoComplete for jQuery

Flexselect là thư viện mã nguồn mở được xây dựng bằng jquery giúp bạn hiển thị các gợi ý cho người dùng, khi họ nhập thông tin nào đó vào ô input thì các gợi ý sẽ hiển thị thông qua dropdown. Đối với cách chọn thông thường qua thẻ select thì nó có một điểm hạn chế là khi người dùng muốn chọn lại thì họ phải tìm kiếm thông tin lại từ đầu ở trong danh sách. Như vậy sẽ rất bất tiện cũng như mất nhiều thời gian cho khách hàng do đó thư viện này xuất hiện để giúp bạn giải quyết vấn đề trên. Để dễ hiểu hơn cũng như biết được cách thiết lập cho trang web thì bạn có thể xem ở trang demo của nó nhé.

Flexselect

Các Thư Viện Autocomplete khác

Vue-autosuggest react-input-enhancements Angucomplete

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện autocomplete hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!