Search Auto Result Using Html JavaScript
Today i'm show to you, how to make filter or search list with HTML and JavaScript
Html
<input type="text" id="inputFilter" onkeyup="searchFunction()" placeholder="Search for name.." >
<ul id="myList">
<li><a href="#">adam</a></li>
<li><a href="#">jordhan</a></li>
<li><a href="#">dummy text</a></li>
<li><a href="#">example</a></li>
</ul>
JavaScript
<script>
function searchFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("inputFilter");
filter = input.value.toUpperCase();
ul = document.getElementById("myList");
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
<input type="text" id="inputFilter" onkeyup="searchFunction()" placeholder="Search for name.." >
<ul id="myList">
<li><a href="#">adam</a></li>
<li><a href="#">jordhan</a></li>
<li><a href="#">dummy text</a></li>
<li><a href="#">example</a></li>
</ul>
JavaScript
<script>
function searchFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("inputFilter");
filter = input.value.toUpperCase();
ul = document.getElementById("myList");
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>
0 Posting Komentar untuk "Search Auto Result Using Html JavaScript"
1. Berkomentarlah dengan tata bahasa yang baik.
2. Silahkan tulis komentar Anda yang masih ada kaitanya dengan postingan.
3. Semua komentar kami baca, namun tidak semua bisa balas, harap maklum.
4. Beri tanda centang pada "Beri tahu saya", untuk pemberitahuan jika komentar telah kami balas.
5. Promosi produk/jasa tidak akan diterbitkan kecuali telah ada kerja sama.
Post a Comment