Thay thế các Select Box mặc định với Select2

Trong quá trình thiết kế web, bạn đã bao giờ gặp phải việc không custom được các select box không, hoặc phải dùng các đoạn javascript loằng ngoằng vào để css cho chúng.

thay-the-cac-select-box-mac-dinh-voi-select2

Hôm nay, mình sẽ chia sẻ cho các bạn một thư viện của jQuery dùng để thay thế hộp chọn mặc định, select2, thư viện tùy biến hỗ trợ cho việc tuỳ chỉnh select box, tìm kiếm dữ liệu trong khi select, tạo tag, điều khiển dữ liệu, và thêm một số tính năng khác.

Một số chức năng

Theo như mô tả trên, select không những chỉ thay đổi được các select box mà nó còn có các chức năng nổi bật sau:

Tạo danh sách động: Cho phép người dùng thêm vào một danh sách mới
Hỗ trợ đầy đủ các trình duyệt: Hoạt động trên các loại trình duyệt mới nhất, bao gồm cả IE8.
Hỗ trợ dữ liệu động: Sử dụng AJAX để hiển thị và chọn từ một CSDL lớn
Hỗ trợ đa giao diện: Sử dụng giao diện tùy biến, các lớp css xây dựng trên SASS và Bootstrap.
Hỗ trợ môi trường RTL, tìm kiếm có dấu và hơn 40 ngôn ngữ
Hỗ trợ thêm việc lựa chọn tự động ngay khi người dùng đang viết vào ô tìm kiếm.

Cài Đặt

1. Các bạn có thể download source code select2 qua link dưới sau: → https://select2.org/,

hoặc → https://github.com/select2/select2.

Có lẽ bạn thích?

2. Hoặc đơn giản nhất là các bạn có thể cài đặt qua các CDN:

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

Sau đó chèn đoạn script sau:

<script>
  $(document).ready(function() {
    $(".select2").select2({
       ...
    });
  });
</script>

Code Example

Bây giờ mình có demo select box, có cả khung search qua lần lượt code HTML, CSS, Js sau:

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>ListJob-Fteam</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
            <select id="js-example-basic-single">
                <option value="" selected hidden >Tất cả thành phố</option>
              <option>Đà Nẵng</option>
              <option>Tp Hồ Chí Minh</option>
              <option>Hà Nội</option>
              <option>Buôn Ma Thuột</option>
            </select>      
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        
 </body>
</html>

CSS

body {
    background: #f0f0f0;
    padding: 50px;
    font-family: 'Roboto', Arial, sans-serif;
}

.container {
  background: #fff;
  border: 1px solid #ccc;
  padding: 30px;
}
.form-control {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: none !important;
    margin-bottom: 15px;
}
.form-control:focus {
    border: 1px solid #34495e;
}
.select2.select2-container {
  width: 20% !important;
}
.select2.select2-container .select2-selection {
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  height: 34px;
  margin-bottom: 15px;
  outline: none !important;
  transition: all .15s ease-in-out;
}
.select2.select2-container .select2-selection .select2-selection__rendered {
  color: #000;
  line-height: 32px;
  padding-right: 33px;
}
.select2.select2-container .select2-selection .select2-selection__arrow {
  background: #f8f8f8;
  border-left: 1px solid #ccc;
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
  height: 32px;
  width: 33px;
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
  background: #f8f8f8;
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
  border: 1px solid #34495e;
}
.select2.select2-container .select2-selection--multiple {
  height: auto;
  min-height: 34px;
}
.select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 0;
  height: 32px;
}
.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: block;
  padding: 0 4px;
  line-height: 29px;
}
.select2.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 4px 4px 0 0;
  padding: 0 6px 0 22px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  position: relative;
}
.select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  margin: 0;
  text-align: center;
  color: #e74c3c;
  font-weight: bold;
  font-size: 16px;
}
.select2-container .select2-dropdown {
  background: transparent;
  border: none;
  margin-top: -5px;
}
.select2-container .select2-dropdown .select2-search {
  padding: 0;
}
.select2-container .select2-dropdown .select2-search input {
  outline: none !important;
  border: 1px solid #34495e !important;
  border-bottom: none !important;
  padding: 4px 6px !important;
}
.select2-container .select2-dropdown .select2-results {
  padding: 0;
}
.select2-container .select2-dropdown .select2-results ul {
  background: #fff;
  border: 1px solid #34495e;
}
.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
  background-color: #D9D6D6;
}

$(document).ready(function() {
   $('#js-example-basic-single').select2();
});

Kết quả

Một số tính năng hay dùng với select2

Cơ bản

$(document).ready(function() {
  $(".js-example-basic-single").select2();
  // Thêm các tùy chọn của bạn vào đây.
});

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Hiển thị nút xóa các giá trị đã chọn

$(".js-example-clear").select2({
  allowClear: true
});

Placeholders

$(".js-example-placeholder-single").select2({
  placeholder: "Select a state",
  allowClear: true
});

Đọc dữ liệu từ một mảng

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(".js-example-data-array").select2({
  data: data
})

Đọc dữ liệu từ nguồn khác sử dụng AJAX

ajax: {
  url: "/contacts",
  dataType: "json",
  delay: 200,
  data: function (params) {
    return {
      search: params.term
    };
  },
  processResults: function (data) {
    return {
      results: data
    };
  },
  cache: true
}

Ẩn ô tìm kiếm

$(".js-example-basic-hide-search").select2({
  minimumResultsForSearch: Infinity
});

Chế độ thẻ Tagging

$(".js-example-tags").select2({
  tags: true
})

Lời kết

Ngoài ra Select2 còn hỗ trợ nhiều tính năng khác như đa ngôn ngữ, giao điện, căn lề, bắt các sự kiện đóng mở select box,... Các bạn có thể xem tất cả các tính năng và source code tại link dưới đây:

https://select2.org/

Với việc hỗ trợ các tính năng của select2 giúp chúng ta giảm được rất nhiều thời gian trong việc custom select box hoặc các tagging,... Để xem tất cả các code demo mình, các bạn có thể truy cập link dưới:

https://codepen.io/collection/DRjdNb

Mong là những chia sẻ này bổ ích với bạn, hãy ủng hộ mình bằng các comment. Chúc các bạn thành công.

By Hiếu Quốc

Hieu Dev Blog

Thay thế các Select Box mặc định với Select2

Một số chức năng

Cài Đặt

Có lẽ bạn thích?

Code Example

Một số tính năng hay dùng với select2

Cơ bản

Hiển thị nút xóa các giá trị đã chọn

Placeholders

Đọc dữ liệu từ một mảng

Đọc dữ liệu từ nguồn khác sử dụng AJAX

Ẩn ô tìm kiếm

Chế độ thẻ Tagging

Lời kết

Post a Comment

Post a Comment

Danh Mục

Blog Bạn Bè

Comments

Địa chỉ

Dịch vụ

Khám phá

Liên kết

Thay thế các Select Box mặc định với Select2

Một số chức năng

Cài Đặt

Có lẽ bạn thích?

Code Example

Một số tính năng hay dùng với select2

Cơ bản

Hiển thị nút xóa các giá trị đã chọn

Placeholders

Đọc dữ liệu từ một mảng

Đọc dữ liệu từ nguồn khác sử dụng AJAX

Ẩn ô tìm kiếm

Chế độ thẻ Tagging

Lời kết

Related Posts

Post a Comment

Post a Comment

Danh Mục

Blog Bạn Bè

Comments

Địa chỉ

Dịch vụ

Khám phá

Liên kết