Page Comparison

...

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:

5. Image Removed
Select node core:ListItem, add the following definition in the Attributes properties:

Right click on input control node to add sub-node “Suggest Item”

1. Image Added

2. Define below properties with value

   Image Addedtext="{_services>Name}" key="{_services>Id}" additionalText="{_services>Id}"

   Code Block
   language xml	text
   Bound Text: _services>Name Bound Key: _services>Id Bound Description: _services>Name

6. 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);
}

function handleSugItemSel(evt){
}

Save your project and test to see the outcome.