Problem AutoComplete Suggestion

[Former Member]

Dear Experts,

I have created one AutoComplete Object as follows

oCB_SO_LensType = new sap.ui.commons.AutoComplete({
  editable: true, 
     selectedItemId:null,
  width: '100%',
  tooltip: "Enter a name",
  maxPopupItems: 10,
  displaySecondaryValues: true,
  items:{
        path:"/E_MaraSet",
        template: new sap.ui.core.ListItem({key: "{Matnr}", text: "{Maktx}", additionalText: "{Matnr}"})
  },
     valueState : sap.ui.core.ValueState.Error,
     change: function(oEvent){
      searchItemCode = oEvent.getSource();
      if(searchItemCode.getSelectedKey()!=null){//GetVarientCode(searchItemCode.getKey()
      oCB_SO_LensType.setValueState(sap.ui.core.ValueState.Success);
      GetArticlePrice();
      oCB_SO_LensSide.focus();
      }else{
      oCB_SO_LensType.setValueState(sap.ui.core.ValueState.Error);
      oCB_SO_LensType.focus();
      }
     },
  });

and the filter as follows

oCB_SO_LensType.setFilterFunction(function(sValue, oItem){
  return (oItem.getText().toUpperCase().search(sValue.toUpperCase())!=-1 || oItem.getAdditionalText().search(sValue)!=-1); 


  });

on poppuing up the suggestion box if i select it through mouse it is giving me the object of combobox which i am using in change event but if select the suggested item using keyboard its not giving me combobox object it is empty i dont know how to handle this situation and i am stuck in it.

Kindly Advise

Rgards

:S

[Qualiture · Accepted solution]

I don't understand your code... why aren't you using the 'suggest' property of the AutoComplete control?

[Former Member · Accepted solution]

Actually i am using this control for the first time and i dont know what to do in the suggest event and how the items will populate when i start typing

[Qualiture · Accepted solution]

The 'suggest' event is fired when the suggestion list would show up.

See for examples the 'Dynamic items' and 'Custom filter function' examples on sap.ui.commons.AutoComplete

[saivellanki · Accepted solution]

Hi Muhammad,

Check this link for sample code using suggest event -

SAPUI5 SDK - Demo Kit

Regards,

Sai Vellanki.

[santhu_gowdaz · Accepted solution]

Then,see these examples-AutoComplete - SAPUI5 Demo Kit

Autocomplete box with OData service | SCN

[Former Member · Accepted solution]

I am using a custom filter i dont want to search on startswith functionality i want to search any thing that appears in the AutoComplete field that's why i implemented following method

setFilterFunction(function(sValue, oItem){...}

[Former Member · Accepted solution]

thanks this was helpful but

when i implemented suggest event like following

suggest: function(oEvent){ 
      var sValue = oEvent.getParameter("suggestValue"); 

      var oFilter1 = isNaN(sValue)
      ? new sap.ui.model.Filter("Maktx", sap.ui.model.FilterOperator.Contains, sValue)
      : new sap.ui.model.Filter("Matnr", sap.ui.model.FilterOperator.EQ, sValue);

      oCB_SO_LensType.getBinding("/E_MaraSet").filter([oFilter1], sap.ui.model.FilterType.Application);
  },  

it is giving me

Uncaught TypeError: Cannot read property 'filter' of undefined

[Qualiture · Accepted solution]

The parameter for getBinding is not a path, but the aggregation (in this case, 'items').

Also, variable oCB_SO_LensType may or may not be available inside the event handler function.

Better change that line to:

oEvent.getSource().getBinding("items").filter(etc...);

[Former Member · Accepted solution]

Dear Robin

I tried what you suggested that filter exception is not being thrown now but filteration is also not neing done, no Suggestion list is being appeared, it appears only if i start typing whith the starting characters i have also checked one thing that filter method also take 3 arguments

Parameters:

1.      {String} type
2.      {EventListener} listener
3.      {Boolean} useCapture

I dont understand the last two parameters also

Regards

[Qualiture · Accepted solution]

Let me take a step back... If I understood you correctly:

• you just want an AutoComplete control which gives you a list of options based on your input
• the suggested options should not only be from the start, but basically 'contains', ie. if you type in 'ab' then a valid option should be 'Call a cab'

In that case, you don't need a model filter, but just the AutoComplete 'setFilterFunction' specified correctly:

var oCB_SO_LensType = new sap.ui.commons.AutoComplete({ 
    displaySecondaryValues: true, 
    items:{ 
        path:"/E_MaraSet", 
        template: new sap.ui.core.ListItem({key: "{Matnr}", text: "{Maktx}", additionalText: "{Matnr}"}) 
    },
    // I left out most other properties and only show here the most relevant ones for easier reading
});

oCB_SO_LensType.setFilterFunction(function(sValue, oItem) {
    var value = sValue.toLowerCase();
    if (oItem.getText().toLowerCase().indexOf(value) != -1 ||
        oItem.getKey().toLowerCase().indexOf(value) != -1  ||
        oItem.getAdditionalText().toLowerCase().indexOf(value) != -1) {
      return oItem;
    }
});  

That is all

[Former Member · Accepted solution]

Dear Robin

this is what i have done initially but you suggested to implement suggest event, problem with this solution is when i select item by using mouse it gives me the source of combo from which i can select the key of the selected item but if scroll down using keyboard down arrow key within the suggested box and then hit enter then insted of firing its own enterkey event its firing AutoComplete onsapenterkey event which executes before it get the selectedKey() which in turns null object in the key.

Kindly look again on top my firest blog about it you will find the same solution but problem is different.

secondly i thing setFilterFunction should return any boolean value but you are returning oItem is it possible?

regards

:S

[Qualiture · Accepted solution]

Hi,

I guess I wasn't entirely sure what you wanted to achieve with your code from the beginning... the 'suggest' event is indeed fired when the selection list is opened, but I now understand upon changing a value you want something to happen with the selected key, right?

In that case, the 'change' event indeed is the correct one.

I could not reproduce your issue with the keyboard navigation though... See this little example: Edit fiddle - JSFiddle which works just fine with both keyboard and mouse

[Former Member · Accepted solution]

Dear Robin

I checked your example it is perfect image of my solution, i implemented the same but some how change event is not being fired when i select the item from the suggested list usng keyboard but when i click on it is being fired any idea about it??? and many many special thanks for your time i really appriciate it.

Regards

:S

[Former Member · Accepted solution]

Dear All

I have found following solution also, kindly check this out

var selObj = oEvent.getSource();
var selCon = selObj.oPopup.oContent;
var selKey = selCon.getSelectedItem().getKey();

in the change method and obtained the reference of the object which is selected by ENTER key. It is working fine for both mouse and Enter

Regards