Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

Anda di sini: Beranda / PHPMaker / Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker
Mudahnya Mengubah Warna Glyphicons Bootstrap 3 di Aplikasi Web dari PHPMaker
Alternatif Cara Membuat Nilai Total Rata Kanan di Aplikasi Web dari PHPMaker

Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker

Januari 24, 2015 oleh Masino Sinaga Tinggalkan Komentar

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? 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:Client Scripts, jQuery, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker, typeahead

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 dan ilovephpmaker.com.

Mudahnya Mengubah Warna Glyphicons Bootstrap 3 di Aplikasi Web dari PHPMaker
Alternatif Cara Membuat Nilai Total Rata Kanan di Aplikasi Web dari PHPMaker

Tinggalkan Balasan Batalkan balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pos-pos Terbaru

  • Server Event Page_Render dan Page_Rendering di PHPMaker, Apa Sih Bedanya?
  • Begini Mudahnya Mengubah Judul Browser Secara Dinamis di PHPMaker 2021
  • Solusi Supaya PreviewRow dan PreviewOverlay Bisa Sama-Sama Berfungsi di PHPMaker 2021
  • Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Masino Sinaga pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Masino Sinaga pada Mudahnya Menambahkan Global Function untuk Auto-Update Field di PHPMaker
  • Abu Syifa pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Abu Syifa pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. 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 - 2019 | WordPress | Catat masuk | Kembali ke atas