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. Right click on input control node to add sub-node “Suggest Item”

    1. Define below properties with value

      Bound Text: _services>Name Bound Key: _services>Id Bound Description: _services>Name
  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); } function handleSugItemSel(evt){ }

Save your project and test to see the outcome.