SAP UI5 TextArea control with suggestion/autocomplete feature

[former_member365727]

We have seen autocomplete features in standard UI5 controls like search field/ Input field, but how to get that feature in TextArea controls. This blog explains how to get auto suggestions feature enabled in TextArea control

Demo:

Sample code:

Plunker sample code

Github Repo:

https://github.com/kvsrikanthj/ui5-textarea-textcomplete

 

Dependencies:

• jquery-textcomplete plugin

Note: Download jquery-textcomplete plugin from this git repo, as it contains some changes(explained below) to support sap.ui.define AMD syntax

Changes done to jquery-textcomplete plugin file:

• Commented lines 2-12


• Added new line 13

How it works

jquery-textcomplete Plugin contains below methods and will be executed in sequence

• match: Supports regular expression or function. When user types anything in the UI5 TextArea element it is continuously checked against the regular expression and triggers search when a match is found


• search: This takes two input parameters explained below
  
  
  
  • query: Regular expression match found in the method match (previous method) of plugin
  
  
  • fnCallback: Callback method provided by plugin. This method needs to be called after data retrieval is done. eg: Get data from backend/model/ajax call etc, then filter data using queryand finally call the callback method
  
  
  
  


• template: Template to display results. HTML list is displayed to the user. Each record from the method search is passed as input to this method and return the template to be displayed


• replace: If user selects an entry from the displayed suggestion list, then while placing the text in UI5 TextArea element the result can be modified. eg: In this current sample code countries are shown, when user selects a country from the list it is converted to uppercase and placed in the UI5 TextArea element