Share Tạo tính năng autocomplete với thư viện Algolia Places

filiallion · 12/12/2019

Autocomplete là một tính năng hay khi được tích hợp vào các form nhập liệu, tính năng này sẽ gợi ý cho người dùng cũng như giúp nhập liệu nhanh hơn. Để xây dựng tính năng autocomplete thì các bạn lập trình viên trước tiên phải xây dựng nguồn dữ liệu lớn để làm nguồn cho autocomplete. Vì vậy, nếu tính năng autocomplete áp dụng cho một số thông tin nhỏ thì có thể dễ dàng xây dựng nguồn dữ liệu nhưng nếu thông tin này là địa chỉ ở bất kỳ đâu trên thế giới thì quả thật đây là một vấn đề hết sức khó khăn bởi khối lượng dữ liệu là rất lớn. Hiểu được sự khó khăn đó, một thư viện hỗ trợ tính năng autocomplete về thông tin địa chỉ đã ra đời, đó là thư viện Algolia Places.

Algolia Places là một thư viện JavaScript được phát triển với một mục đích duy nhất đó là hỗ trợ tính năng autocomplete để gợi ý địa chỉ mà người dùng nhập, ngoài ra thư viện Algolia Places còn hỗ trợ liên kết với Google Maps để đánh dấu vị trí mà người dùng chọn. Đây thật sự là một thư viện hữu ích nếu các bạn đang có một thành phần nhập địa chỉ. Thư viện Algolia Places hỗ trợ gần như tất cả các địa chỉ hiện có trên thế giới nên các bạn có thể hoàn toàn yên tâm sử dụng mà không sợ thiếu sót một địa điểm nào đó.

Để sử dụng thư viện Algolia Places, các bạn có thể tải tại địa chỉ https://github.com/algolia/places và tích hợp vào website với dòng mã lệnh HTML như sau:

HTML:

<script src="path/to/places.js"></script>

Bây giờ, các bạn tạo một input để tích hợp tính năng autocomplete:

HTML:

<input type="text" id="places">

Tiếp theo, quan trọng nhất là cài đặt thư viện Algolia Places:

JavaScript:

var places = places({
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    container: document.querySelector('#places')
});

Các bạn có thể tìm hiểu thêm về thư viện Algolia Places tại địa chỉ https://community.algolia.com/places/documentation.html.

Share Tạo tính năng autocomplete với thư viện Algolia Places

filiallion

Administrator