Membuat kotak pencarian teks di halaman postingan

Membuat kotak pencarian teks di halaman postingan Sobat blogger..
Artikel kali ini, kita akan mencoba membuat kotak pencarian teks di halaman blog kita, seperti penggunan tombol Ctrl+F pada browser.
Perbedaan dari kotak pencarian kebanyakan adalah, kotak pencarian ini hanya mencrawl pada halaman blog / website saja.
Dan hasil pencarian akan tampil langsung di bawahnya tanpa menekan tombol ok

Membuat kotak pencarian teks di halaman postingan

Ide awal dari pemasangan kotak pencarian ini bermula karena postingan yang saya tulis adalah hanya berupa daftar nama-nama tempat.
Dan ketika visitor mencari nama yang ada di halaman postingan, mereka harus scroll ke bawah untuk menemukan nama yang mereka cari..

Dari beberapa lokasi tempat pertapaan untuk mencari solusi cara pencarian teks yang simpel ini akhirnya saya menemukan skrip untuk pencarian tersebut / find text / CTRL+F hahahaha..
Skrip ini bersumber dari www.w3schools.com - Filter/Search List
Baca juga: Cara menampilkan widget di halaman tertentu Dan uniknya, skrip ini dapat diterapkan di blogspot.. asik kan?

Seperti contoh dibawah ini:




Mari memulai..
Membuat kotak pencarian teks di halaman postingan

KODE CSS:
<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('https://3.bp.blogspot.com/-6A8n_lbi-to/Wc4F5HfBhjI/AAAAAAAABqg/BuWGbJmVBwM8un68YrazL0Y5HVLTlgQqwCLcBGAs/s1600/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>

KODE HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
  <li><a href="#">NAMA 1</a></li>
  <li><a href="#">NAMA 2</a></li>
  <li><a href="#">NAMA 3</a></li>
  <li><a href="#">NAMA 4</a></li>
  <li><a href="#">NAMA 5</a></li>
  <li><a href="#">NAMA 6</a></li>
</ul>

JAVASCRIPT:
<script>
function myFunction() {
    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>

Semoga artikel tentang Membuat kotak pencarian teks di halaman postingan ini bermanfaat bagi pembaca semua..

Comments

Post a Comment