Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Menampilkan Kotak Pencarian di Control Select2 dari PHPMaker 2021
Hal Ini Wajib Diketahui Jika Menggunakan Fitur Import Data di PHPMaker 2021
Mengenal Lebih Lanjut REST API di PHPMaker 2021

Mudahnya Menampilkan Kotak Pencarian di Control Select2 dari PHPMaker 2021

Rab, 4 November 2020 oleh Masino Sinaga Tinggalkan Komentar

Sejak versi 2021, PHPMaker menggunakan control Select2 menggantikan control Select atau Combobox jadul. Control Select2 memiliki beberapa fitur unggulan, seperti: pencarian, tagging, remote data sets, infinite scrolling, dan masih banyak lagi.

Tidak hanya itu saja. PHPMaker 2021 menyediakan fleksibilitas yang sangat tinggi, berupa kemudahan untuk mengubah pengaturan yang terkait dengan control Select2. Ini jugalah alasan yang paling kuat, mengapa harus menggunakan PHPMaker 2021.

Seperti pengaturan berikut. Kita dapat menentukan berapa jumlah item minimal yang terdapat di dalam control Select2, supaya kotak pencarian (search box) otomatis muncul, ketika Pengguna Akhir mengklik atau menekan Enter saat kursor mouse fokus ke control Select2.

Secara default, PHPMaker 2021 menetapkan minimal 20 item option, supaya kotak pencarian muncul di control Select2. Jika jumlah item option kurang dari 20, maka kotak pencarian tidak akan ditampilkan.

Tentu saja kita sebagai Web Developer dapat mengubah pengaturan ini. Katakanlah kita menentukan minimal 10 item option supaya kotak pencarian muncul. Bagaimana caranya?

Cukup masukkan sebaris kode Javascript ini, pada lokasi berikut di project PHPMaker 2021: Client Scripts -> Global -> Pages with header/footer -> Client Script:

ew.selectOptions.minimumResultsForSearch=10;

Setelah itu, pastikan untuk men-generate ulang paling tidak file userevent.js. Hanya itu saja? Yep, selebihnya ditangani oleh PHPMaker 2021. Tidak perlu menulis kode sampai berpuluh-puluh atau beratus-ratus baris panjanganya.

Sekarang cobalah untuk mengakses halaman yang memiliki control Select2 dari Aplikasi Web lewat browser, buka halaman Add atau Edit, lalu klik control Select2. Pastikan jumlah item option di field tersebut lebih dari 10. Seharusnya sekarang Anda sudah melihat kotak pencarian muncul di sana.

Coba juga cek pada field yang menggunakan control Select2, dimana jumlah item optionnya di bawah 10. Seharusnya kotak pencarian tidak muncul di sana.

Kadang-kadang, kita sebagai Web Developer ingin menyembunyikan semua item option yang terdapat di control Select2. Pertimbangannya, jumlah record yang akan dimuat dari database bisa mencapai ratusan atau bahkan ribuan. Jika harus dimuat semuanya, maka akan membutuhkan waktu relatif lebih lama dari yang seharusnya.

Sebagai gantinya, kita hanya menampilkan kotak pencarian di control Select2 tersebut. Dalam hal ini, Pengguna Akhir wajib mengetik minimal satu karakter, untuk mulai pencarian. Jika data ditemukan, barulah control Select2 menampilkan item option yang terkait.

Nah, kalau yang terakhir ini bagaimana caranya? Gampang! Tinggal aktifkan saja pengaturan Requires search yang terdapat pada Fields setup -> panel Edit Tag -> SELECT Tag.

Setelah itu? Pastikan untuk men-generate ulang semua file script seperti biasa.

PHPMaker 2021 memang tiada duanya, hohoho… 😉 😛

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Infinite Scrolling, PHPMaker 2021, PHPMaker Indonesia, Search Textbox, Select2, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Hal Ini Wajib Diketahui Jika Menggunakan Fitur Import Data di PHPMaker 2021
Mengenal Lebih Lanjut REST API di PHPMaker 2021

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas