Assalamualaikum.
Satu kata yang ingin kuucapkan "Bootstrap memang TOP BGT".
Alhamdulilah dengan bantuan framework bootstrap ini, membuat web semakin mudah. Selain mudah, web yang dihasilkan pun lebih responsive, dinamis, simple dan menarik.
Pada kesempatan ini saya akan sedikit berbagi mengenai bootstrap-select untuk pencarian otomatis.
Pencarian otomatis yang dimaksud yaitu pada waktu kita mempunyai data lumayan banyak, dan ingin menampilkan secara otomatis saat melakukan penginputan data tanpa menekan tombol apapun.
Apa itu bootstrap select?
bootstrap select merupakan plugin JQuery yang disediakan oleh bootstrap untuk menambhakan fungsionalitas dari select elemen.
Dimana saya bisa mendapatkannya?
untuk tutorial lengkap dan demo secara live mengenai bootstrap-select, kita bisa mengunjungi alamat http://silviomoreto.github.io/bootstrap-select
Bagaiman cara membuat Pencarian otomatis dengan select seperti tampak pada gambar diatas?
1. Siapkan framework bootstrap 3 yang bisa didownonload di http://getbootstrap.com/
Saat ini versinya sudah mencapai V3.3.7
2. Siapkan bootstrap select, http://silviomoreto.github.io/bootstrap-select
Filenya dalam bentuk .zip maka untuk menggunakannya lakukan extrak ke xampp/htdocs/
berikut scritnya:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select test page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<style>
body {
padding-top: 70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
</head>
<body>
<select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>
<hr>
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label for="error" class="col-lg-2 control-label">error</label>
<div class="col-lg-10 error">
<select id="error" class="selectpicker show-tick form-control">
<option>pen</option>
<option>pencil</option>
<option selected>brush</option>
</select>
</div>
</div>
</body>
</html>
catatan: untuk link rel dan script
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> bisa diganti disesuaikan dengan lokasi kita menaruh bootstrap.min.css semisal distributor_bsp/css/bootstrap.min.css
- <script src="dist/js/bootstrap-select.js">
<link rel="stylesheet" href="dist/css/bootstrap-select.css"></script>
disesuaikan dengan lokasi file bootsrap-select.js berada
No comments:
Post a Comment