Sebelumnya saya pernah membahas tentang Cara Membuat Pencarian Otomatis Menggunakan Jquery, sekarang saya akan mencoba Cara Membuat Pencarian Data Otomatis Menggunakan Mootools framework supaya anada dapat membandingkan mana yang lebih mudah di gunakan untuk membuat pencarian data.
Pada tutorial kali ini saya akan membahas tentang Cara Membuat Pencarian Data Otomatis Menggunakan Mootools, di sini kita akan mencoba selector pada mootools untuk mendapatkan data dari HTML.
Nah, sekarang saya akan mencoba menjelaskan Cara Membuat Pencarian Data Otomatis Menggunakan Mootools, berikut langkah-langkahnya:
– Pertama buka text editor teman-teman dan masukan kode html dan css di bawah ini:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>Web Master</li>
<li>Website</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>Mootools</li>
<li>PHP</li>
<li>Dumetschool</li>
</ul>
</body>
</html>
Coba teman-teman jalankan di browser teman-teman lalu ketikan teks “web” maka tampilannya akan menjadi seperti gambar di bawah ini:
Kedua, teman-teman download file mootoolsnya di website mootools, lalu simpan di dalam folder yang sama dengan file htmlnya.
Ketiga, kita panggil file mootoolsnya dengan menggunakaan kode di bawah ini:
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script><br /><script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
Keempat, masukan script di bawah ini untuk mendapatkan teks yang kita inputkan pada elemen, Berikut scriptnya:
<script type = "text/javascript"><br /> window.addEvent('domready',function(){<br /> var input = $('filter');<br /> <br /> // mengatur atribut judul pada setiap elemen<br /> // mengatur teks lowercase<br /> $$('ul > li').each(function(item){<br /> item.set('title', item.get('text').toLowerCase());<br /> });<br /> <br /> // fungsi akan di panggil ketika kita ketikan teks<br /> var filterList = function(){<br /> var value = input.value.toLowerCase();<br /> $$('li').setStyle('display','none');<br /> <br /> // memeriksa atribut judul jika mengandung teks yang pengguna ketikan<br /> $$('ul > li[title*=' + value + ']').setStyle('display','');<br /> };<br /> <br /> // membuat semuanya berhasil<br /> input.addEvent('keyup', filterList);<br /> });<br /></script>
Coba teman-teman refresh browser teman-teman lalu ketikan lagi teks “web” maka elemen yang mengandung teks “web” akan tampil. Berikut gambarannya:
Bagaimana teman-teman cukup mudahkan Membuat Pencarian Data Otomatis Menggunakan Mootools.
Sekain tutorial kali ini tentang Cara Membuat Pencarian Data Otomatis Menggunakan Mootools. Selamat mencoba yah teman-teman.
The post Cara Membuat Pencarian Data Otomatis Menggunakan Mootools appeared first on Kursus Website Terbaik.