Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker

Aplikasi Web yang dihasilkan oleh PHPMaker dapat menyertakan fitur Auto-Suggest. Seperti namanya, fitur ini dapat memberikan sugesti secara otomatis kepada Pengguna saat mengetikkan data di Textbox. Maksudnya adalah, jika Pengguna mengetikkan satu atau beberapa karakter di sebuah Textbox, maka sistem akan menampilkan semacam List berisi pilihan yang datanya diambil dari Database, sehingga Pengguna terbantu untuk memilih data sebelum selesai mengetikkan semua karakter.

Untuk menghasilkan fitur ini pada Field yang Anda inginkan, maka lakukan langkah sebagai berikut:

1. Pastikan Anda sudah mengklik salah satu table yang Anda inginkan dari panel Database.
2. Klik salah satu Field yang Anda inginkan untuk mengimplementasikan fitur Auto-Suggest tadi.
3. Pastikan Anda memilih Text pada panel Edit Tag.
4. Masih pada panel Edit Tag, beri tanda centang pada item Use lookup table dan Force selection.
5. Setelah itu, pastikan Anda sudah mengatur data tabel yang akan Anda lookup dari panel Lookup Table di bawah tab Fields.

Secara standar, PHPMaker sudah menentukan jumlah karakter minimum yang diketikkan oleh Pengguna untuk men-trigger event Auto-Suggest tadi, yaitu 1. Artinya, ketika Pengguna baru mengetikkan satu karakter saja, maka sistem akan langsung mencari data ke table lookup yang sudah Anda tentukan sebelumnya. Sistem akan menampilkan List yang berisi data yang mengandung karakter awal yang sudah diketik tadi.

Agar data yang ditampilkan oleh sistem di pilihan Auto-Suggest tadi bisa lebih difilter, khususnya jika Record di table lookup jumlahnya relatif banyak, maka Anda dapat membatasi jumlah karakter minimum yang ketika diinput Pengguna baru akan menampilkan List berisi pilihan data tadi.

Katakanlah kita akan membatasi minimal 3 karakter pertama yang diketik pada field Model yang terdapat pada halaman Add Cars, maka cukup masukkan kode jQuery berikut ke bagian Startup Script yang berada di lokasi Client Scripts -> Table-Specific -> Add/Copy Page:

$(document).ready(function() {
	$("#x_Model").on("typeahead", function(event, args) { 
		args[0].minLength = 3;
	});
});

Kode yang sama barusan bisa Anda terapkan pada halaman Edit pada bagian Startup Script yang berada di lokasi Client Scripts -> Table-Specific -> Edit Page.

Perlu diingat, bahwa kode ini tidak berlaku untuk halaman Grid-Add atau Grid-Edit, mengingat nama elemen di atas hanya untuk satu control saja. Sementara yang kita ketahui, nama elemen yang terdapat di dalam form Grid-Add maupun Grid-Edit berbeda dengan nama elemen pada form tunggal Add maupun Edit.

Seperti biasa, simpan perubahan di project Anda tadi, lalu generate ulang semua file script dengan menggunakan PHPMaker.

Betapa mudahnya, bukan? 😀