Skip to Content
avatar image
Former Member

Input Field and suggestionItems

Hi experts,

I am trying to show a suggestion list when user types a username in an "Input"(sap.m.Input) field.

The filtering works for first username but for the next username it does not work.

The input field is defined as follows:

<Input
  id="productInput"
  type="Text"
  placeholder="Place Holder"
  liveChange="setSuggestion"
  suggestionItems="{username>/names}" 
  suggest="handleSuggest"
  width="auto">
  <suggestionItems>
  <core:Item text="{username>name}" />
  </suggestionItems>
  </Input>

The functions are set as follows:

setSuggestion:function(oEvent){
  if(oEvent.getParameter("newValue").endsWith('@')){
  console.log("Suggest");
  lv_start_pos = oEvent.getSource().getFocusInfo().cursorPos - 1 ;
  this.getView().byId('productInput').setShowSuggestion(true);
  }else if(oEvent.getParameter("newValue").endsWith(' ')){
  console.log("Do not Suggest");
  lv_start_pos = undefined;
  this.getView().byId('productInput').setShowSuggestion(false);
  }
  },
  handleSuggest:function(oEvent){
  var sTerm = oEvent.getParameter("suggestValue").slice(lv_start_pos,oEvent.getSource().getFocusInfo().cursorPos);
  var aFilters = [];
  if (sTerm) {
  aFilters.push(new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.StartsWith, sTerm));
  }
  oEvent.mParameters.suggestValue = sTerm;
  oEvent.getSource().getBinding("suggestionItems").filter(aFilters);
  }

Here whenever user types @ the username has to be shown.

Hence the username is extracted using the setSuggestion function.

The names are defined as:

{
"names":[{"name":"@skk","id":"skkk"},
         {"name":"@ajjj","id":"ajjj"}
]


}

In the input field when for the first time when user types the username the suggestion list is displayed.

For ex: On typing "@" the usernames in the json are displayed. Now on selecting one entry from the list, on continuing to type as follows:

"@ajjj @"

the list is not displayed further.

Is there any way I can achieve the list display again?

Thanks in advance.

Thanks and Regards,

Sarath

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Mar 30, 2016 at 09:30 AM

    Hi Sarath,

    You may have to use MultiInput and make sure only one item would be selected. May be this sample helps? JS Bin - Collaborative JavaScript Debugging


    Snippet:

    Regards,

    Sai Vellanki.


    capture4.gif (39.3 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thanks Sai. It works if we type the usernames while starting but not if we edit something in between.

      For ex: @ajjj asfdsj...after this it does not work.