Cara Membuat Input Search Menggunakan Bootstrap dan Javascript -

Hallo Sahabat Dumet School. Berjumpa kembali bersama saya di Website Kursus Web Design ,pada kesempatan kali ini saya akan membahas tentang cara membuat Input search menggunakan bootstrap dan javascript .Jadi saat kita ketikan keyword pada sebuah inputan maka akan memunculkan data sesuai yang diketikan, dan jangan lupa saya akan menggunakan template dari Bootstrap sahabat bisa langsung mengcopy link CDN disiniÂ .

Langkah pertama persiapkan struktur HTML lalu ketikan script dibawah ini:

<!DOCTYPE html>
<html>
 <head>
<title>Input Search Dengan Bootstrap dan Javascript</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="search.js"></script>
 </head>
 <body>
<section class="container">
 
 <h3>Input Search Dengan Bootstrap dan Javascript</h3>
 
 <input type="search" class="form-control light-table-filter" data-table="table-hover" placeholder="Mencari..." />
 
 <table class="table table-hover text-center">
  <thead>
   <tr class="table-primary">
    <th>Nama</th>
    <th>Email</th>
    <th>Telp</th>
    <th>Alamat</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Donw Juan</td>
    <td>donju@gmail.com</td>
    <td>021707070</td>
    <td>Jakarta</td>
   </tr>
   <tr>
    <td>Dee Dumm</td>
    <td>deed@gmail.com</td>
    <td>021517070</td>
    <td>Bandung</td>
   </tr>
   <tr>
    <td>Excel Id</td>
    <td>exid@gmail.com</td>
    <td>021747451</td>
    <td>Banten</td>
   </tr>
  </tbody>
 </table>
 
</section>
 
 </body>
</html>

Langkah berikutnya saya menambahkan style CSS nya seperti berikut ini:

.form-control{
  width: 25%;
}
input[type=search]
{
  float: right;
  border:1px solid #0af;
  margin-bottom: 10px;
}

Langkah yang ketiga sahabat harus membuat file baru yang berisi script dari javascript dan saya save file menjadi search.js seperti script dibawah ini:

search.js

(function(document) {
 'use strict';
 
 var LightTableFilter = (function(Arr) {
 
  var _input;
 
  function _onInputEvent(e) {
   _input = e.target;
   var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
   Arr.forEach.call(tables, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
     Arr.forEach.call(tbody.rows, _filter);
    });
   });
  }
 
  function _filter(row) {
   var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
   row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
  }
 
  return {
   init: function() {
    var inputs = document.getElementsByClassName('light-table-filter');
    Arr.forEach.call(inputs, function(input) {
     input.oninput = _onInputEvent;
    });
   }
  };
 })(Array.prototype);
 
 document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
   LightTableFilter.init();
  }
 });
 
})(document);

script diatas digunakan pada sebuah tag input yang tadi terdapat pada file HTML, jadi saat mengetikan sebuah keyword tertentu maka akan mencari data yang terdapat pada table dimana value nya terdapat pada setiap tag <td> ,

JIka sudah coba sahabat jalankan pada browser masing-masing ,apabila sudah benar maka akan seperti gambar dibawah ini :

Demikian artikel tentang cara membuat Input search menggunakan bootstrap dan javascript ,semoga bermanfaat dan selamat mencoba.

terima kasih.

Cara Membuat Input Search Menggunakan Bootstrap dan Javascript

Kategori