-->
Home
css

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

Hieu Ho
Hieu Ho 0 Comments
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/,


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;
}
Js 
$(document).ready(function() {
   $('#js-example-basic-single').select2();
});
Kết quả
See the Pen select2 - demo1 by Hiu Dev (@hiudev) on CodePen.

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:


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:


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

Có lẽ bạn thích?

Post a Comment

Post a Comment