Figure: Autocomplete suggestion list
Autocomplete Setup
The autocomplete mechanism is implemented by using a <<UIAutocompleteTransition>> within the web pages state machine. The stereotype is set on a Transition to Self as shown in the figure below. There are two tagged values which need to be set on this <<UIAutocompleteTransition>> being the Service Call to the service which delivers the suggestion list data and the actual Event Source, the text field, which should offer the auto complete feature.
Figure: Auto complete State Machine
Autocomplete Service Call
The service call for this feature needs to implement the built in input and output types UIAutocompletionRequest and UIAutocompletionResponse. They are part of the E2E Base Components and can be found in the corresponding repository package. The input data of the request object is a string value (input) taken automatically from the eventSource myTestInputField. The response object consists of an multiplicity of UIAutocompetionElement object. Last is a simple key value pair construct (label, value). The request and response objects do not need to be bound to the text element. This is all done automatically.
Figure: Autocomplete Service Types
However, sometimes it is necessary to add additional information to the autocomplete request to do the appropriate lookups. In this case just take as input type a class derived from UIAutocompletionRequest as shown in the following figure. There the input type for the autocomplete request is the class MyAutocompleteRequest:
In the autocomplete example a database is used to retrieve the suggestion list according to the end user's input. Here a possible implementation using database requests:
Figure: Autocomplete Service Call Implementation