Fungsi search sangatlah penting, dimana kita ketika ingin mencari data data tinggal kita ketikan saja data tersebut di input search nya, maka data tersebut bisa langsung ditemukan. Nah kali ini saya akan menshare bagaimana car Membuat Fungsi Search dengan Javascript. Oke langsung saja kita praktekan teman teman.
Pertam ketikan kode HTML di bawah ini dan berinama dengan nama index.html.
Index.html
<p><!DOCTYPE html></p><p><html></p><p><head></p><p> <title> Fungsi Search dengan Javascript </title></p><p> <link rel="stylesheet" href="style.css" type="text/css"></p><p><style></p><p></style></p><p></head></p><p><body></p><p> </p><p><h2>Data Konsumen</h2></p><p> </p><p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cari Berdasarkan nama..." title="Type in a name"></p><p> </p><p><table id ="myTable"></p><p> <tr class ="header"></p><p> <th style ="width:60%;"> Nama </th></p><p> <th style ="width:40%;"> Kota </th></p><p> </tr></p><p> <tr></p><p> <td> Untung Beruntung </td></p><p> <td> Surabaya </td></p><p> </tr></p><p> <tr></p><p> <td> Wini Sutani </td></p><p> <td> Jogjakarta </td></p><p> </tr></p><p> <tr></p><p> <td> Iman Haryadi </td></p><p> <td> Solo </td></p><p> </tr></p><p> <tr></p><p> <td> Rival Franc </td></p><p> <td> Jakarta </td></p><p> </tr></p><p> <tr></p><p> <td> Sulasti utari </td></p><p> <td> Bogor </td></p><p> </tr></p><p> <tr></p><p> <td> Mega Sulistia </td></p><p> <td> Serang </td></p><p> </tr></p><p> <tr></p><p> <td> Indah Utari </td></p><p> <td> Medan </td></p><p> </tr></p><p> <tr></p><p> <td> Fakih Umar Yasin </td></p><p> <td> Bekasi </td></p><p> </tr></p><p></table></p><p></body></p><p></html></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Setelah tag penutup table ketikan kode javascript berikut.
<p><script></p><p>function myFunction() {</p><p> var input, filter, table, tr, td, i;</p><p> input = document.getElementById("myInput");</p><p> filter = input.value.toUpperCase();</p><p> table = document.getElementById("myTable");</p><p> tr = table.getElementsByTagName("tr");</p><p> for (i = 0; i < tr.length; i++) {</p><p> td = tr[i].getElementsByTagName("td")[0];</p><p> if (td) {</p><p> if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {</p><p> tr[i].style.display = "";</p><p> } else {</p><p> tr[i].style.display = "none";</p><p> }</p><p> } </p><p> }</p><p>}</p><p></script></p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Lalu ketikan kode CSS berikut dan beri nama style.css.
style.css
<p>* {</p><p> box-sizing: border-box;</p><p>}</p><p> </p><p>#myInput {</p><p> background-image: url('/css/searchicon.png');</p><p> background-position: 10px 10px;</p><p> background-repeat: no-repeat;</p><p> width: 100%;</p><p> font-size: 16px;</p><p> padding: 12px 20px 12px 40px;</p><p> border: 1px solid #ddd;</p><p> margin-bottom: 12px;</p><p>}</p><p> </p><p>#myTable {</p><p> border-collapse: collapse;</p><p> width: 100%;</p><p> border: 1px solid #ddd;</p><p> font-size: 18px;</p><p>}</p><p> </p><p>#myTable th, #myTable td {</p><p> text-align: left;</p><p> padding: 12px;</p><p>}</p><p> </p><p>#myTable tr {</p><p> border-bottom: 1px solid #ddd;</p><p>}</p><p> </p><p>#myTable tr.header, #myTable tr:hover {</p><p> background-color: #f1f1f1;</p><p>}</p><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>
Sekian tutorial Membuat Fungsi Search dengan Javascript semoga bermanfaat…