Cara Membuat Pencarian Data Otomatis Menggunakan Mootools
Sebelumnya saya pernah membahas mengenai Cara Membuat Pencarian Otomatis Menggunakan Jquery, sekarang ini saya akan mencoba Cara Membuat Pencarian Data Otomatis Menggunakan Mootools framework supaya anada dapat membandingkan mana yang lebih gampang di gunakan bagi merancang pencarian data.
Di panduan kali ini saya akan membahas mengenai Cara Merancang Pencarian Data Otomatis Menggunakan Mootools, di sini kita akan mencoba selector di mootools bagi memperoleh data dari HTML.
Nah, sekarang ini saya akan mencoba menjelaskan Cara Membuat Pencarian Data Otomatis Menggunakan Mootools, berikut langkah-langkahnya:
– Pertama-tama 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>Laman</li>
<li>jQuery</li>
<li>JavaScript</li>
<li>Mootools</li>
<li>PHP</li>
<li>Source Code Aplikasi</li>
</ul>
</body>
</html>
Coba teman-teman jalankan di browser teman-teman lalu ketikan teks “web” karenanya tampilannya akan menjadi seperti gambar di bawah ini:
Kedua, teman-teman unduh file mootoolsnya di blog mootools, lalu simpan di pada 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 bagi memperoleh teks yang kita inputkan di faktor, Berikut scriptnya:
<script type = text/javascript><br /> window.addEvent('domready',function(){<br /> var input = $('filter');<br /> <br /> // mengatur atribut judul di setiap faktor<br /> // mengatur teks lowercase<br /> $$('ul > li').each(function(item){<br /> item.set('title', item.get('text').toLowerCase());<br /> });<br /> <br /> // manfaat 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 sekiranya mengandung teks yang pengguna ketikan<br /> $$('ul > li[title*=' + value + ']').setStyle('display','');<br /> };<br /> <br /> // merancang semuanya berhasil<br /> input.addEvent('keyup', filterList);<br /> });<br /></script>Coba teman-teman refresh browser teman-teman lalu ketikan lagi teks “web” karenanya faktor yang mengandung teks “web” akan tampil. Berikut gambarannya:
Bagaimana teman-teman lumayan mudahkan Merancang Pencarian Data Otomatis Menggunakan Mootools.
Sekain panduan kali ini mengenai Cara Membuat Pencarian Data Otomatis Menggunakan Mootools. Selamat mencoba yah teman-teman.
Sumber https://kursuswebsite.org
