Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member365727
Active Contributor
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:



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

Labels in this area