CODEWITHSUNDEEP
javascriptsapui5
Ranaga
Ranaga

Reputation: 13

Filter Suggestion Items using Key in SAPUI5

I've implemented a suggestion items for an input field inside a table and it's working fine. Also, i've implemented the event "SuggestionItemSelected" to get the additional text of the suggested item to display the description of the code.

SuggestItemSelected event will trigger only if we select the suggested item from the list and then we could get the text of the code selected.

So how to get the text of the entered code if we enter the data directly in the input field without using suggestion items? I know we could get the value of the input field by reading "byId()" but not getting how to get the associated text.

I've tried to filter the suggestion items with the selected key value but it wouldn't work. Kindly help to filter the suggestion items on key value to get the associated text of it.

Suggestion Items Array

enter image description here

Upvotes: 1

Views: 3230

Answers (1)

Benedikt Kromer
Benedikt Kromer

Reputation: 731

I played a bit around with the suggestions and it looks like if:

  • you type very fast and press enter before suggestion opens, onSuggestionItemSelected is not called.
  • leave (mouse click somewhere else) onSuggestionItemSelected is not called.

You could simply check getSelectedKey()and refuse this user input with a message like "use a suggestion".

Anyhow, there is a way to filter afterwards based on the input for a suggestion item key; see my example.

But keep in mind that getSuggestionItems() returns 0 items if the suggestions http-request is still in progress. Sadly ui5 has no promise api in place.

sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
    const oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
        rows : [
            { key: "1", col4 : "Value4" },
            { key: "2", col4 : "Value2" },
            { key: "3", col4 : "Value16" },
            { key: "4", col4 : "Value20" }
        ]
    });

    this.getView().setModel(oModel);
},

onChange: function(oEvent) {
    const input = oEvent.getSource()
    let selectedKey = input.getSelectedKey()
    if(!selectedKey){  
      var dataObject =
      selectedKey = input.getSuggestionItems()
      .map( (suggestionItem)=> suggestionItem.getBindingContext().getObject() )
      .find( (a)=> a.col4 === oEvent.getParameter("newValue")  );
      if(dataObject){
        selectedKey = dataObject.key
           console.log("found key:" + selectedKey)
      }else{
           console.warn("no matching key")
       }   
    }else{
       console.log("provided key:" + selectedKey)
    }
   
},
onSuggestionItemSelected: function(oEvent) {
    
}

});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
/* extra CSS classes here */
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
    <Input
            
            showSuggestion="true"
      change="onChange"
      suggestionItemSelected="onSuggestionItemSelected"
            suggestionItems="{/rows}">
            <suggestionItems>
                <core:Item text="{col4}" key="{key}" />
            </suggestionItems>
        </Input>
</mvc:View>
</script>

Upvotes: 1

Related Questions