CODEWITHSUNDEEP
sapui5
mydoghasworms
mydoghasworms

Reputation: 18591

Setting sap.m.Input description on suggestion item select

​I have an Input field for a vendor number where I have implemented a suggestion. I would like to, when the value is selected from the suggestion, populate the description attribute of the Input field with the name of the vendor, so that the user can confirm, from the vendor name, that they have the right vendor selected. (Better than just showing a number on the page).

I assume I should be able to get the description from the selected item, as it is available in the suggestion list.

However, I don't know how to reference the description. I have added a handler for the suggestionItemSelected event for the Input to try and catch the selected item and set the text from there, but the event object I am passed does not seem to allow me to get at the selected item.

Is there another way, otherwise, to do this? Or can you display a text (like the vendor name) in the input while the value is actually the key (vendor number)?

Upvotes: 0

Views: 1741

Answers (2)

Inizio
Inizio

Reputation: 2256

Just get the binding context of the selected item and update the corresponding description

XML: include the event suggestionItemSelected to update the description

<Input
  class="sapUiSmallMarginBottom"
  type="Text"
  placeholder="Enter item ..."
  showSuggestion="true"         
  suggestionItemSelected="handlesuggestionItemSelected" 
  suggestionItems="{oModel>/items}" >
  <suggestionItems>
    <core:Item text="{oModel>title}" />
  </suggestionItems>
</Input>

Controller.js

handlesuggestionItemSelected: function(oEvent){
  if (oEvent.getParameters().selectedItem) {
    oEvent.getSource().setDescription(oEvent.getParameters().selectedItem.getBindingContext("oModel").getObject().type);//updating the corresponding description.
  } else {
    oEvent.getSource().setDescription("");
  }     
},
setModel: function() { //dummy data
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData({
    "items": [
      { "tooltipInfo": "Group1", "icon": "sap-icon://hint", "type": "Monitor", "title": "Tiles: a modern UI design pattern for overview & navigation."},
      { "tooltipInfo": "Group2", "icon": "sap-icon://inbox", "type": "Bonitor","number": "89", "title": "Approve Leave Requests", "info": "Overdue", "infoState": "Error"}]
  });
  this.getView().setModel(oModel, "oModel");
}

Upvotes: 0

Johann Goltz
Johann Goltz

Reputation: 154

There's a sample on how to display two columns in the type-ahead suggestions of the Input control. Just bind the suggestionItems to your list of vendors and set the template to something like <core:ListItem text="{Number}" additionalText="{Name}"/>.

Upvotes: 0

Related Questions