Buat menu pencarian di html

/*Kotak Penelusuran CSS3*/ #search{position. relatif; mengambang. kanan; margin. 5px 10px 5px 10px}li. cari{float. kanan; garis-tinggi. normal}#search input[type="text"]{float. kiri; latar belakang. #444; tinggi. 30px; tinggi baris. 30px; perbatasan. 0 tidak ada; ukuran font. 12px; font-berat. 500; lebar. 150px; padding. 0 10px}#search input#search-button{height. 30px; tinggi baris. 30px; latar belakang. #0054BB; perbatasan. 1px solid #fff;float. kanan; bantalan. 0 10px; kursor. penunjuk; warna. #fff}#masukkan pencarian#tombol pencarian. arahkan{latar belakang. #333}#masukan pencarian[type="text"]. fokus{warna latar belakang. #fff; teks-bayangan. tidak ada. penting; garis besar. tidak ada; warna. #555}

Anda pasti sudah mengetahui apa itu fungsi pencarian pada website, dan Anda juga pasti sering menemukan form pencarian tersebut saat membuka sebuah website, karena fungsi pencarian ini sangat berguna bagi pengunjung untuk melihat langsung apa yang ingin dilihat oleh pengunjung, jadi tanpa harus untuk menggulir ke bawah. dan untuk cara membuat fungsi ini akan saya coba buat dengan javascript, kenapa javascript, nanti kita bahas ya, simak terus ya teman-teman

Kenapa harus javascript, karena disini saya akan mengetik langsung dan yang saya inginkan adalah ketika saya mengetikkan karakter pertama dia akan mencari, tentunya kita menggunakan cara ini untuk daftar yang sudah muncul, seperti dalam hal ini saya menggunakan itu untuk mencari kategori, jadi dimana website ini banyak sekali kategorinya, dan saya tinggal ketik, misal pakaian, maka akan muncul pakaian tersebut, paling atas, seperti itu

Oke sudah kebayang kan, untuk kasus kali ini langsung saja kita lihat seperti apa templatenya, disini saya ingin kalian membuat file index. html, dan silahkan ketik kode seperti ini

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div kelas = "wadah">

<h1>Bagaimana Membuat Penelusuran Menggunakan Javascript< / h1>

<div kelas = "kiri">

<h2>Daftar Kategori< / h2>

<masukkan ketik = "teks" nama = "" id =< /a> "cariKat" onkeyup = "processMenu()" < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder < a i=14>placeholder placeholder = "Telusuri Di Sini. ">

<ul id = "pendaftaran kategori"< /a>>

<li><a href = "#">Kaos < / a>< / li>

<li><a href = "#">Kemeja< / a>< / li>

<li><a href = "#">Blazer< / a>< / li>

<li><a href = "#">Celana Jeans< / a>< / li>

<li><a href = "#">Celana Sekolah< / a>< / li>

<li><a href = "#">Celana Permata< / a>< / li>

<li><a href = "#">Rok Rentang< / a>< / li>

<li><a href = "#">Kaos Bra< / a> < / li>

<li><a href = "#">Daster< / a>< / li>

<li><a href = "#">Batik< / a>< / li>

<li><a href = "#">Kemeja Renang< / a>< / li>

< / ul>

< / div>

<div kelas = "benar">

<h2>Selamat tinggal Ayo di toko Sejahtera</h2>

<p>Lorem ipsum dolor duduk amet, consectetur adipisicing elit, sed do eiusmod

sementara tidak disengaja ut kerja dancepat esse pariatur. Kecuali sint occaecat cupidatat non

proident, sun in culpa qui officia deserunt mollit anim id est laborum. < / p>

< / div>

< / div>

diatas adalah templatenya, dan sekarang mari kita lihat kode javascriptnya

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

fungsi processMenu()

{

var masukan = dokumen. getElementById("findKat");

var filter = masukan. nilai. toLowerCase();

var ul = dokumen. getElementById("listCategory");

var li = dokumen. querySelectorAll("li")

konsol. log(li)

untuk(var i = 0; i<li. panjang; i ++ ){

var ahref = dokumen. querySelectorAll("a")[i];

jika(ahref. innerHTML. toLowerCase(). indexOf(filter) > - 1){

li[i]. gaya. tampilan = "";

}lain{

li[i]. gaya. tampilan = "tidak ada";

}

}

}

Oke sekarang mari kita lihat di form input search saya masuk ke event onkeyup yang didalamnya berisi proses untuk mencarinya sob. dan di kode javascript nya saya buat biar kalau di search dan user cari huruf kecil ya dan ada if nya dimana karakternya di menu kategori akan muncul kurang lebih seperti itu. dan jika tidak maka disembunyikan. oke bagaimana hasilnya seperti ini

sebelah kiri adalah tampilan dan ketika kita cari ada di sebelah kanan, dan saya mencoba mencari kata rok dan tampilan rok spon, seperti itu, untuk desain silahkan berkreasi sendiri, dan saya rasa cukup untuk pelajari cara membuat Functions Search dengan Javascript, semoga bermanfaat dan sampai jumpa di artikel berikutnya, terima kasih