ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WLanguage / WLanguage functions / Controls, pages and windows / Input suggestion functions
  • Overview
  • Principle
  • In-memory input suggestions
  • How to?
  • Examples
  • Remarks
  • Input suggestions based on a data file
  • How to?
  • Input suggestions defined programmatically
  • How to?
  • Example
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
Implementing input suggestions in an Edit control is very simple: when the user starts typing in an Edit control, a list automatically opens below the control and shows the values that start with the characters being typed.
Input suggestions can be implemented in the editor or be customized programmatically.
Principle
WINDEV, WINDEV Mobile and WEBDEV include several types of input suggestions:
  • In-memory input suggestions: The Edit control is not bound to an item in a data file. Input suggestions are based on a list of data created programmatically (using <Edit>.AddAssistedInput). The data that appears in the list of suggestions is based on what the user types.
  • Input suggestions based on a data file: The Edit control is bound to an item in a data file or query. The data that appears in the list of suggestions is based on what the user types.
  • Input suggestions defined programmatically: Suggestions come from a custom set of data. The list shows custom suggestions based on user input.
AndroidiPhone/iPad Caution: In this version, input suggestions are not available in simulator mode.
In-memory input suggestions

How to?

To implement in-memory input suggestions:
  1. Use <Edit>.AddAssistedInput to add the elements that will appear in the input suggestions.
    You can add:
    • a simple value, which will appear in the list of input suggestions,
    • one value that will be displayed and one value that will be stored.
    • a variable of type AssistedInput.
  2. If necessary, use <Edit>.ConfigureAssistedInput to define the input suggestion options: filter, opening mode of the list of suggestions, number of characters required to open the list, etc.
Remark: The stored value allows you to associate a specific value to an input suggestion. You can use this value to perform a specific process according to the type of value selected.

Examples

  • WINDEVAndroidiPhone/iPad Example for a window:
    // End of window initialization
    EDT_Find.ConfigureAssistedInput(aiMinSize, 3)
    EDT_Find.ConfigureAssistedInput(aiFilter, filterContains)

    FOR EACH STRING sTitle OF gsPhotoTitles SEPARATED BY CR
    EDT_Find.AssistedInputAdd(sTitle)
    END
  • WEBDEV - Server codeWEBDEV - Browser codePHPAjax Example for a page:
    // Load code of the page
    EDT_Find.ConfigureAssistedInput(aiMinSize, 3)
    EDT_Find.ConfigureAssistedInput(aiFilter, filterContains)

    FOR EACH STRING sTitle OF gsPhotoTitles SEPARATED BY CR
    EDT_Find.AssistedInputAdd(sTitle)
    END

Remarks

  • The optional "Select a value in the list of input suggestions" event is executed when an element is selected. This event takes a variable of type AssistedInput as parameter. This variable allows you to get the selected value and the associated stored value, if any.
  • By default, the value displayed in the Edit control is the value is selected in the input suggestions. To change the value in the Edit control, use the "Select a value in the list of input suggestions" event. You can choose to display the stored value instead, for example.
For more details, see Events associated with Edit controls.
Input suggestions based on a data file

How to?

To implement input suggestions based on a data file:
  1. In the Edit control description window:
    • Check whether the Edit control is bound to an item in a data file or query ("Binding" tab).
      Caution: The item must be a key.
    • In the "Details" tab, check "Assisted input based on data binding".
  2. Validate the Edit control description window.
At runtime, as soon as the first letter is typed in the control:
  • WEBDEV - Server code a list appears with different results that match the letter typed.
  • WINDEV the first result that matches the entered character is displayed. The matching data changes as you type.
Remarks:
  • If the Edit control is bound to a query item, the query is automatically executed. However, if the query expects parameters, you must specify them (e.g., in the "Global declarations" or "End of initialization" events of the window) and then execute the query with <Source>.ExecuteQuery.
  • Input suggestions are shown using a "Starts with" filter. To use another filter, you must define input suggestions programmatically.
Input suggestions defined programmatically

How to?

By defining input suggestions programmatically, you can use a custom data source.
To use input suggestions defined programmatically:
  1. Disable the default filter with <Edit>.ConfigureAssistedInput (using the filterNone constant). Thus, the list of input suggestions can be opened and display all the specified elements.
  2. In the "Whenever modifying" event of the Edit control:

Example

// "Contains" search performed in the name
// and code of an array of stock shares
FOR EACH sName, sCode of gArrShare
IF Contains(sCode, sSoughtValue) _OR_ ...
Contains(sName, sSoughtValue) THEN
SAI_Programmed_mode.AssistedInputAdd(sName)
END
END
Related Examples:
Photo_Gallery Complete examples (WEBDEV): Photo_Gallery
[ + ] This example is a photo gallery site and is composed of 2 main parts:
- the "visitor" part, developed in Active WEBDEV Page mode and SEO-compatible.
- the administration part, secured and developed in standard WEBDEV mode.  
 
These are some of the available features:
- organize photos via albums
- include links to social networks
- enable users to comment on posts
- user login via WEBDEV'S GPU
- contact form
- ability to upload, describe, and classify photos via albums on the administration side
The AssistedInput functions Unit examples (WINDEV): The AssistedInput functions
[ + ] Using the WLanguage AssistedInput functions.
These functions are used to easily implement an assisted input on the controls.
Minimum version required
  • Version 24
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 02/21/2024

Send a report | Local help