Pada artikel kali ini saya akan menjelaskan cara membuat filter otomatis dengan menggunakan javascript. dimana terdapat sebuah textbox yang pada saat anda mengetikan huruf maka list akan langsung terfilter mengikuti karakter yang anda ketik tanpa harus melakukan submit button.
File HTML
<div id="wrapper">
<h1>Membuat Filter List Otomatis Dengan Javascript</h1>
<p class="lead">Ketikan kata kunci di kolom search untuk mem-filter nama - nama kota dibawah ini</p>
<input type="text" class="form-control" id="myInput" onkeyup="cari()" placeholder="Search">
<br><br>
<div class="row">
<ul id="myUL">
<li><a href="#"> Jakarta</a></li>
<li><a href="#">Bandung</a></li>
<li><a href="#">Yogyakarta</a></li>
<li><a href="#">Tegal</a></li>
<li><a href="#">Surabaya</a></li>
<li><a href="#">Cirebon</a></li>
</ul>
</div> <!-- /row -->
</div> <!-- /wrapper -->
Simple html untuk menampilkan halaman, yang berisi textbox dan list
File CSS
<style>
body{background-color: #333333;color: #ffffff;}
#wrapper {width:800px;margin:0 auto;}
#myInput {
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #5cb85c;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
float: left;
width:19.5%;
padding-bottom: 15px;
margin: 2px;
color: #ffffff;
}
#myUL li a:hover:not(.header) {
background-color: #4a954a;
}
</style>
File JAVASCRIPT
<script>
function cari() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
File Keseluruhan
Berikut merupakan file keseluruhan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Membuat Filter List Otomatis Dengan Javascript">
<meta name="author" content="Membuat Filter List Otomatis Dengan Javascript">
<title>Membuat Filter List Otomatis Dengan Javascript</title>
<style>
body{background-color: #333333;color: #ffffff;}
#wrapper {width:800px;margin:0 auto;}
#myInput {
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #5cb85c;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
float: left;
width:19.5%;
padding-bottom: 15px;
margin: 2px;
color: #ffffff;
}
#myUL li a:hover:not(.header) {
background-color: #4a954a;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Membuat Filter List Otomatis Dengan Javascript</h1>
<p class="lead">Ketikan kata kunci di kolom search untuk mem-filter nama - nama kota dibawah ini</p>
<input type="text" class="form-control" id="myInput" onkeyup="cari()" placeholder="Search">
<br><br>
<div class="row">
<ul id="myUL">
<li><a href="#"> Jakarta</a></li>
<li><a href="#">Bandung</a></li>
<li><a href="#">Yogyakarta</a></li>
<li><a href="#">Tegal</a></li>
<li><a href="#">Surabaya</a></li>
<li><a href="#">Cirebon</a></li>
</ul>
</div> <!-- /row -->
</div> <!-- /wrapper -->
</body>
<script>
function cari() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</html>
Demikian merupakan cara membuat Membuat Filter List Otomatis Dengan Javascript
sumber
