Created on 27 April 2020
icon_unfollowing
Login to follow
reactiveautocomplete

ReactiveAutoComplete

Stable version 1.3.1 (Compatible with OutSystems 11)
Uploaded on 07 December 2022 by 
CrossDevice_icon
4.3
 (10 ratings)
1 review
 983
 35
reactiveautocomplete

ReactiveAutoComplete

Documentation
1.3.1
What is ReactiveAutoComplete?


ReactiveAutoComplete is a component that you can put next to an input field to give 'autocomplete' functionality when a user starts typing in an input field.  It basically provides suggested values for the input field.


How to use ReactiveAutoComplete?


Use ReactiveAutoComplete next to an Input component, like this:


The component takes the following input parameters:

  • InputWidgetId
    Id of the Input field for which you want autocomplete functionality
  • ListValues
    • If IsAutoFilter = True, then these are ALL possible values, and filtering will be done by ReactiveAutoComplete itself.
    • If IsAutoFilter = False, then this list should contain only the filtered autocomplete values. Filtering should be done in response to the OnFilterValueChanged event.
  • IsAutoFilter
    Set to True if the full list of values is passed to ListValues and the values should be filtered automatically using text contains. In this case: do not add handler for OnFilterValueChanged.
  • JumpToWidgetId
    (Optional) Id of a component to scroll to when navigating through the autocomplete values with the arrow keys.  Can be a component other than the Input field from InputWidgetId.  For example a parent container like the Form that contains this Input field.
  • EnableDoubleClickToShowAll
    If enabled, double-clicking the empty field will show the full list if IsAutoFilter=True or will trigger a TriggerOnFilterValueChanged if IsAutoFilter=False
  • MinimumFilterSize
    The minimum amount of characters needed to trigger the autocomplete.


You can use it in two ways

  • Using IsAutoFilter = True
  • Using IsAutoFilter = False


IsAutoFilter = True

This is most useful when the list of possible values is not too large and fetching the complete list does not take too long.

When AutoFilter = True the component does the filtering of values itself.
This means you need to provide it with the FULL list of possible values.
You do not need to implement a handler for OnFilterValueChanged in this case.

IsAutoFilter = False

This is most useful when the list of possible values is large and fetching the complete list would take too long.

When AutoFilter = False the component leaves the filtering to you.
This means you need to provide it with the filtered list of values instead of the full list.

You need to implement a handler for OnFilterValueChanged, in which you update the list of filtered values based on the search text you get from the OnFilterValueChanged event.

In this implementation, the search is only triggered when typing at least 2 characters.

The max number of results is also set to 50.

See the demo for an example implementation.





Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
See all 1 dependencies