Share Tạo form nhập các tag với thư viện Selectize.js

[filiallion]

Language

Tiếng Việt

Các website cho phép người dùng viết bài viết như các blog, diễn đàn, các trang bán hàng thường sẽ có chức năng nhập các tag (Các thẻ từ khoá) để người dùng khác có thể dễ dàng tìm kiếm bài viết theo các tag đó. Nếu các bạn không quan tâm nhiều đến chức năng này thì website của các bạn chỉ đơn giản là một textbox nhập các tag đơn giản, nhưng nếu các bạn muốn đầu tư cho chức năng nhập các tag này thì các bạn có thể sử dụng thư viện Selectize.js mà tôi sẽ hướng dẫn trong bài viết này.

Thư viện Selectize.js được viết dựa trên nền tảng jQuery nên các bạn cần phải tích hợp thư viện jQuery vào website trước. Các bạn truy cập địa chỉ https://github.com/selectize/selectize.js để tải thư viện Selectize.js và tích hợp vào website với nội dung mã lệnh như sau:

<link href="path/to/selectize.css" rel="stylesheet">
<script src="path/to/selectize.min.js"></script>

Các bạn cài đặt thư viện Selectize.js với nội dung mã lệnh như sau:

$(function() {
    $('.selectize').selectize({
        delimiter: ',',
        persist: false,
        create: function(input) {
            return {
                value: input,
                text: input
            };
        }
    });
});

Và áp dụng cho các textbox nhập tag như ví dụ sau:

<input type="text" class="selectize">

Các bạn có thể tìm hiểu thêm về thư viện Selectize.js tại địa chỉ https://github.com/selectize/selectize.js.