4D Blog

Home Product Type ahead made easy

Type ahead made easy

October 27, 2020

Product

If you’re interested in the user interface, you may have already used the On before keystroke and On after keystroke events. You’ll certainly be happy to know that the handling of these events has been greatly enhanced with 4D v18 R5. In addition, a new command has been created to determine if there is ongoing input when the On before keystroke event is generated. Let’s find out more!

HDI: Type ahead made easy

text inputs

When you enter text, the system may intervene to help you, regardless of the language or the OS. For example, take the case of accented characters in French or Spanish: “ê” “ü” “ñ”. To enter these characters in macOS, the simplest way is to hold down the corresponding key which causes a dialog box to appear:

To select the letter you want, you need to use the arrow keys and then validate your choice with the “return” or “enter” key:

blank

As of 4D v18 R5, the On before keystroke and On after keystroke events are only generated once this type of system dialog (aka IME) is validated. There’s no need to receive the codes corresponding to the arrow keys and the validation key when only the final letter is important!

list boxes

List boxes have also gotten an enhancement. The On before keystroke event is generated as soon as the list box has focus when a key is typed, even if no cell is being entered. This allows us to know which keys have been pressed and makes it possible to programmatically make decisions such as starting a new search or changing the current selection!

MoRE INFO with a new command

How do you know if an event was generated during an actual input or simply because the list box had the focus at the moment a key was pressed on the keyboard? The answer is very simple: the new Is editing text command. It returns True if the user is entering values in an input form object, and False in all other cases. 

Code sample

This simple example shows you how to perform a query as soon as any letter between A and Z is typed on the keyboard (all other characters are ignored in this sample).

Of course, the query can’t be performed while a cell is being modified. That’s why we use the new Is editing text command before performing any new query.

var $char : Text
Case of
:(
FORM Event.code=On Before Keystroke)
 If (Not(Is editing text))  // check not in input mode
  $char:=Keystroke
  Form.people:=
ds.people.query("firstname = :1 or lastname = :1";$char+"@")
 End if
End case
 

 

Another example?

The following animated GIF shows what can be done using this event in a list box, without the help of any other buttons or input areas (the letters that appear on the animated GIF are only displayed to show what keys have been typed on the keyboard).

 

blank

 

Find more details about the command in the doc center!

Conclusion

This feature helps create a more user-friendly interface and we’re quite sure that as a developer, you’ll use it to further enhance your user experience!

For more information, feel free to check out the documentation!

Discuss

Tags Listbox, Programming, UI, User Experience, v18 R5, v19

Latest related posts

  • November 14, 2025

    Event Report in 4D Qodly Pro: See Every Interactions at a Glance

  • November 14, 2025

    4D Qodly Pro: Page Zoom Controls

  • November 13, 2025

    macOS Tahoe, Windows 11, which operating systems for 4D 20 and 21?

Roland Lannuzel
Roland Lannuzel
• Product Owner & 4D Expert • After studying electronics, Roland went into industrial IT as a developer and consultant, building solutions for customers with a variety of databases and technologies. In the late 80’s he fell in love with 4D and has used it in writing business applications that include accounting, billing and email systems.Eventually joining the company in 1997, Roland’s valuable contributions include designing specifications, testing tools, demos as well as training and speaking to the 4D community at many conferences. He continues to actively shape the future of 4D by defining new features and database development tools.
  • Deutsch
  • Français
  • English
  • Português
  • Čeština
  • Español
  • Italiano
  • 日本語

Categories

Browse categories

  • 4D View Pro
  • AI
  • 4D Write Pro
  • 4D for Mobile
  • Email
  • Development Mode
  • 4D Language
  • ORDA
  • User Interface / GUI
  • Qodly Studio
  • Server
  • Maintenance
  • Deployment
  • 4D Tutorials
  • Generic
  • 4D Summit sessions and other online videos

Tags

4D-Analyzer 4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R10 21 Administration AI Artificial Intelligence Build application Class Client/Server Code editor Collections Formula Listbox Logs Mail Microsoft 365 Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor

Tags

4D-Analyzer 4D AIKit 4D for Android 4D for iOS 4D NetKit 4D Qodly Pro 4D View Pro 4D Write Pro 20 R10 21 Administration AI Artificial Intelligence Build application Class Client/Server Code editor Collections Formula Listbox Logs Mail Microsoft 365 Network Objects OpenAI ORDA PDF Pictures Preemptive Programming REST Scalability Security Session Source control Speed Spreadsheet Tutorial UI User Experience v20 vscode Web Word processor
Subscribe to 4D Newsletter

© 2025 4D SAS - All rights reserved
Terms & Conditions | Legal Notices | Data Policy | Cookie Policy | Contact us | Write for us


Subscribe to 4D Newsletter

* Your privacy is very important to us. Please click here to view our Policy

Contact us

Got a question, suggestion or just want to get in touch with the 4D bloggers? Drop us a line!

* Your privacy is very important to us. Please click here to view our Policy