Membuat Select2 Dapat Langsung Menerima Event Keypress di PHPMaker 2022

Seperti yang sudah kita ketahui, sejak versi 2021, PHPMaker mulai menggunakan control Select2 menggantikan control Combobox yang biasa. Banyak keuntungan yang kita dapatkan setelah PHPMaker menggunakan Select2, seperti yang diuraikan pada website Select2 tadi.

Keuntungan yang sangat dirasakan oleh Pengguna Akhir adalah kemampuan mencari data dengan cara mengetik satu atau beberapa karakter di dalamnya. Jika sebelumnya kita menggunakan control Select atau Combobox biasa, maka fitur pencarian data dengan cara mengetik langsung di dalam control ini belum dapat dilakukan.

Sayangnya, jika control Select2 hanya dapat memilih satu pilihan (bukan multi-select), maka kita harus mengklik terlebih dulu control Select2 tadi untuk menampilkan area dropdown yang dilengkapi text untuk mengetik data yang akan dicari. Sementara untuk multi-select, maka control Select2 dapat langsung menerima input berupa event keypress tanpa harus menampilkan area dropown-nya terlebih dulu.

Pertanyaan selanjutnya, apakah kita bisa membuat supaya control Select2 yang bukan multi-select tadi dapat menerima input berupa event keypres tanpa menampilkan area dropdown-nya, sama seperti jika kita menggunakannya untuk multi-select? Jawabannya tentu saja bisa. Hehe, penasaran bagaimana caranya?

Ternyata mudah sekali. Langsung saja kita terapkan pada project demo2022 yang bisa Anda coba sendiri di localhost.

Buka project tersebut dengan PHPMaker 2022, lalu klik table orders dari panel Database di sebelah kiri. Selanjutnya klik field EmployeeID dari Fields setup, dan beri tanda centang pada kolom Ext. Search di bawah kolom List Page.

Berikutnya, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu langsung lompat ke lokasi berikut: Client Scripts -> Table-Specific -> List Page -> Client Script, dan copy-kan kode berikut ke kode editor di sebelah kanan:

loadjs.ready("forderssrch", function() {
    // EmployeeID
    var optionsEmpID = { name: "x_EmployeeID", selectId: "forderssrch_x_EmployeeID" },
        elEI = document.querySelector("select[data-select2-id='" + optionsEmpID.selectId + "']");
    optionsEmpID.dropdownParent = elEI.closest("#ew-modal-dialog, #ew-add-opt-dialog");
    if (forderssrch.lists.EmployeeID.lookupOptions.length) {
        optionsEmpID.data = { id: "x_EmployeeID", form: "forderssrch" };
    } else {
        optionsEmpID.ajax = { id: "x_EmployeeID", form: "forderssrch", limit: ew.LOOKUP_PAGE_SIZE };
    }
    optionsEmpID.allowClear = true;
    optionsEmpID.multiple = true;
    optionsEmpID.maximumSelectionLength = 1;
    optionsEmpID = Object.assign({}, ew.selectOptions, optionsEmpID, ew.vars.tables.orders.fields.EmployeeID.selectOptions);
    ew.createSelect(optionsEmpID);
});

Setelah itu silahkan generate ulang semua file script dengan menggunakan PHPMaker 2022 seperti biasa, lalu cobalah login ke aplikasi web dengan username admin dan password master.

Buka menu OTHER TABLES -> Orders, lalu pastikan panel pencarian sudah terbuka (expanded).

Cobalah untuk membuat agar kursor mouse focus pada field Employee pada panel pencarian; bisa dengan klik field lain lalu pindahkan ke field Employee tadi, atau bisa juga langsung klik pada field Employee.

Perhatikanlah sekarang, kita dapat langsung mengetikkan satu atau beberapa karakter pada field Employee tadi. Karena field Employee ini hanya bisa memilih satu pilihan saja, maka ketika Anda ingin mencoba memilih pilihan yang lain, akan muncul tulisan bahwa Anda hanya dapat memilih satu item saja.

Mungkin ada yang bertanya, kok bisa? Kuncinya ada pada potongan kode berikut:

optionsEmpID.maximumSelectionLength = 1;

Cukup dengan meng-assign opsi maximumSelectionLength dengan nilai 1, yang artinya hanya boleh memilih satu pilihan saja.

Selain kode itu, cobalah perhatikan kode yang ini yang berada di atas kode tadi:

optionsEmpID.multiple = true;

Inilah kode penentu, mengapa akhirnya field Employee pada panel pencarian tadi bisa langsung menerima event keypress tanpa harus mengklik field tersebut terlebih dulu untuk menampilkan dropdown berisi textbox untuk mengetikkan pencarian sekaligus menampilkan hasilnya.

Betapa mudahnya bukan? Sedikit tricky memang, tapi benar-benar berfungsi.