Add input suggestion for Input control using SAP Standard Search Help

You can define input suggestion for Input control with defined search help using SAP Standard Search Help.

Prerequisite:

• Input control with defined search help using SAP Standard Search Help.

Expected output after implementation:

1. Select input control in layout of your project.

2. In properties window of selected input control, select More to open dialog to present additional properties.

   

3. In additional properties dialog, define the following values:

   

   1. text Format Mode: Key

   2. show Suggestion: true

   3. suggestion Items: {_services>/GenSearchHelp}

   4. suggest: define JS function to handle suggest event i.e: handleSuggestion(evt)

   5. suggestionItemSelected: define JS function to handle event when suggestion item is selected i.e: handleSugItemSel(evt).

4. Add 2 custom node under input control:

   1. 

   2. Select node core:ListItem, add the following definition in the Attributes properties:

      text="{_services>Name}"
      key="{_services>Id}"
      additionalText="{_services>Id}"

5. Add a script node in your project, open editor and add following implementation for JS function to handle suggest event:

function handleSuggestion(evt){
    //Get suggest value from input control
	var sTerm = evt.getParameter("suggestValue");
	
	//Build filter list for EntitySet GenSearchHelp of built-in OData Model _services
	var aFilters = [];
	if (sTerm) {
		aFilters.push(new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, sTerm));
	}
	//Get configuration data from defined Search help for input control
	var oConfig = evt.getSource().data("config");
	if(oConfig){
	    aFilters.push(new sap.ui.model.Filter("Config", sap.ui.model.FilterOperator.EQ, oConfig));
	}
	//Apply filter for EntitySet GenSearchHelp.
	evt.getSource().getBinding("suggestionItems").filter(aFilters);
}

Save your project and test to see the outcome.