Cara Membuat Search Select Option Dengan Selectize

Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan belajar dengan kasus Cara Membuat Search Select Option Dengan Selectize, seperti select option pada umumnya yaitu menampilkan pilihan data untuk di input. Namun dengan adanya plugin selectize ini kita dapat menambahkan search pada select option.

Supaya user tidak scroll terlalu banyak maka kita tambahkan search untuk kenyamanan user dalam menginput data. Untuk itu mari langsung saja kita implementasikan dengan bootstap juga.

Pertama, kita load library bootstrap dan plugin selectize nya

<!-- css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />

<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

Kemudian kita buat layout select option dan menambahkan class bootstrapnya

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>Cara Membuat Search Select Option Dengan Selectize</h2>
    </div>
    <div class="col-5">
      <div class="form-group">
            <label>Nama Product</label>
            <select class="form-control" name="status_peserta" id="status_peserta" required>
              <option></option>
              <option value="Product 1">Product 1</option>
              <option value="Product 2">Product 2</option>
              <option value="Product 3">Product 3</option>
              <option value="Product 4">Product 4</option>
              <option value="Product 5">Product 5</option>
            </select>
          </div>
      </div>
    </div>
  </div>

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Cara Membuat Search Select Option Dengan Selectize

Nah selanjutnya tinggal kita aktifkan selectize nya, kita berikan script di bawah ini

<script type="text/javascript">
  $(document).ready(function () {
      $('select').selectize({
          sortField: 'text'
      });
  });
</script>

Jika sudah save dan refresh kembali pada browsernya

Cara Membuat Search Select Option Dengan Selectize
Cara Membuat Search Select Option Dengan Selectize

Maka selectize berhasil kita tambahkan pada tag select option, dengan adanya plugin ini kita mendapat option. Bisa menggunakan selectize ataupun menggunakan auto complete jquery.

Baiklah, itulah tip dan trik tentang Cara Membuat Search Select Option Dengan Selectize teman – teman bisa tambahkan pada project yang sedang di kerjakan. Tentu kita akan berjumpa kembali pada artikel yang akan datang, terimakasih dan sampai jumpa.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *