Pencarian data dengan javascript

Pada kesempatan kali ini saya akan menjelaskan cara membuat pencarian data table dengan JavaScript. Perlu teman-teman ketahui sebelumnya, untuk memudahkan penggunanya dalam melakukan pencarian data pada table sangat penting, guna memudahkan dalam melakukan filter atau pencarian data tersebut dalam bentuk table. Pencarian yang akan saya buat disini menggunakan event onkeyup, jadi dari pencarian tersebut tidak membutuhkan tombol button untuk menghandle dari textbox pencarian tersebut. Dan dari event onkeyup tersebut tentunya dapat dibuat dengan JavaScript supaya pencarian nantinya tidak membutuhkan penyegaran halaman di browser dari pencarian tersebut.

Bagi teman-teman yang belum mengetahui cara kerja dari event onkeyup tersebut akan saya jelaskan. onkeyup adalah event yang biasanya di pasang di dalam komponen input textbox. Cara kerja dari event tersebut adalah melakukan proses dari event tersebut dimana ketika teman-teman mengetikan suatu kata atau kalimat baik 1 maupun beberapa huruf di dalam komponen tersebut maka akan langsung dijalankan atau di proses untuk berlanjut ke proses selanjutnya. Cara kerjanya hampir sama dengan event-event yang lainnya, hanya saja dari masing-masing event tersebut berbeda waktu dalam menjalankan prosesnya. Atau seperti pada contoh umumnya yang mungkin sudah teman-teman tahu seperti event click dari komponen button, dimana event tersebut akan berjalan apabila teman-teman menekan tombol button tersebut. Jadi event onkeyup sama seperti event-event pada umunya, hanya saja untuk event onkeyup akan melakukan menjalankan proses ketika teman-teman mengetikan suatu huruf, kata atau kalimat di dalam komponen tersebut.

Berikut Tahapannya

• Teman-teman buat terlebih dahulu satu buah file dengan nama index.php
• Jika sudah ketikan kode seperti berikut

• Jika sudah save file tersebut dan lihat hasilnya di browser teman-teman

Sampai disini penjelasan saya mengenai cara membuat pencarian data table dengan JavaScript, semoga bermanfaat.