cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

DropdownBox/ListBox 'type-ahead' issue

Go to solution
Qualiture
Active Contributor

on ‎01-22-2014 11:21 AM

0 Kudos

Hi all,

I'm having an issue with the type-ahead functionality -- i.e. filter results as you type --  with the sap.ui.commons.DropdownBox/ListBox controls.

If I have more than 10 items in my list, then typing a value will filter the results based on my entry; the list options are being filtered.

Before typing:

After typing, filtering occurs:

However, if my list contains less than 10 items, no filtering occurs but the selection simply changes to the first significant entry:

Has someone find a way to have filtering occur regardless of the list item count? Any help would be greatly appreciated!

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

jmoors
Active Contributor
‎01-22-2014 2:24 PM
0 Kudos

Looks like it's the standard behaviour...

In the sap.ui.commons.DropdownBox.prototype._doTypeAhead function it's checking the number of items



    iMaxPopupItems = this.getMaxPopupItems(), 


    aItems = this.__aItems || oLB.getItems(), 


    iVisibleItemsCnt = aItems.length, 


    // filtering and history only apply when more than a certain number of items is there


    bHistory = aItems.length > this._iItemsForHistory, 


    bFilter = !bNoFilter && bHistory,

Regards,

Jason

Show replies
Show replies
Qualiture
Active Contributor
‎01-22-2014 2:44 PM
0 Kudos

Hi James,

Thanks for finding this! I will dive in further and hopefully I'll be able to override this 'certain number' somehow 😉

Cheers,

Robin

jmoors
Active Contributor
‎01-22-2014 2:46 PM
0 Kudos

Looks like the value is configured in the sap.ui.commons.DropdownBox.prototype.init

this._iItemsForHistory = 10; // UX defined history shall appear if there are more than 10 items

Qualiture
Active Contributor
‎01-22-2014 3:12 PM
0 Kudos

Awesome, thanks Jason!

If I set my DropdownBox instance to:

oDropdownBox._iItemsForHistory=0;

...then it works as intended!

Best,

Robin

Answers (2)

Answers (2)

surendra_pamidi
Contributor
‎01-22-2014 12:50 PM
0 Kudos

Hi Robin,

With less than 10 items also filtering is working fine. Might be some another error.

In demo kit they gave week days example which is having 7 items and I also did with less than 10 items..

<!DOCTYPE html>

<html><head>

    <meta http-equiv='X-UA-Compatible' content='IE=edge' />

    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

   

    <title>OData Date Formats</title>

      <script src="/sap/ui5/1/resources/sap-ui-core.js" ,

  id="sap-ui-bootstrap" ,

  data-sap-ui-libs="sap.ui.ux3,sap.ui.commons,sap.ui.table,sap.m",

                data-sap-ui-theme="sap_goldreflection">

  

  </script>

  </head>

  <body>

  <div id='content'></div>

       

           <script>

// Create a ListBox

var oListBox2 = new sap.ui.commons.ListBox("days", {items : [

    new sap.ui.core.ListItem("Day1", {text:"Monday"}),

  new sap.ui.core.ListItem("Day2", {text:"Tuesday"}),

  new sap.ui.core.ListItem("Day3", {text:"Wednesday"}),

  new sap.ui.core.ListItem("Day4", {text:"Thursday"}),

  new sap.ui.core.ListItem("Day5", {text:"Friday"}),

  new sap.ui.core.ListItem("Day6", {text:"Saturday"}),

  new sap.ui.core.ListItem("Day7", {text:"Sunday"})]

  });

// Create dialog for search help

var oSearchDialog = new sap.ui.commons.Dialog("SearchHelp", {

  modal: true,

  title: "Search Help (example dialog)",

  buttons: [new sap.ui.commons.Button("CancelButton", {

  text: "Cancel",

  press: function(oEvent){

  // close dialog without changing value

  oEvent.getSource().getParent().close();

  }})],

  content: [new sap.ui.commons.ListBox("SearchList", {

  width:"100%",

  visibleItems: 7,

  allowMultiSelect: false,

  items : [

  new sap.ui.core.ListItem("Day-1", {text:"Monday"}),

  new sap.ui.core.ListItem("Day-2", {text:"Tuesday"}),

  new sap.ui.core.ListItem("Day-3", {text:"Wednesday"}),

  new sap.ui.core.ListItem("Day-4", {text:"Thursday"}),

  new sap.ui.core.ListItem("Day-5", {text:"Friday"}),

  new sap.ui.core.ListItem("Day-6", {text:"Saturday"}),

  new sap.ui.core.ListItem("Day-7", {text:"Sunday"})],

  select: function(oEvent){

  // close dialog and set value to selected one

  oEvent.getSource().getParent().close();

  var oDropdownBox = sap.ui.getCore().byId("DropdownBox4");

  oDropdownBox.setValue(oEvent.getParameter("selectedItem").getText());

  }})],

  initialFocus: "SearchList",

  closed: function(oEvent){

  // if dialog is closed set focus back to the DrobdownBox

  var oDropdownBox = sap.ui.getCore().byId("DropdownBox4");

  oDropdownBox.focus();}

  });

// Create a DropdownBox

var oDropdownBox4 = new sap.ui.commons.DropdownBox("DropdownBox4", {

  tooltip:"Days",

  displaySecondaryValues:true,

  "association:listBox" : oListBox2,

  // Assign search help to DropdownBox

  searchHelpEnabled:true,

  searchHelp: function(oEvent){

  var oList = oSearchDialog.getContent()[0],

  aItems = oList.getItems(),

  oVal = oEvent.getParameter("value");

  for (var i = 0; i < aItems.length; i++){

  if(aItems[i].getText() === oVal) {

  oList.setSelectedIndex(i);

  break;

  }

  }

  oSearchDialog.open();

  }

  });

// Attach the DropdownBox to the page

oDropdownBox4.placeAt("content");

          

</script>

  

  </body>

</html>

Show replies
Show replies
jmoors
Active Contributor
‎01-22-2014 1:25 PM
0 Kudos

I've just tried your example and it jumps to the correct item in the list, however it doesn't filter the items as Robin described, i.e. if I type S, it does filter the list to Saturday and Sunday as it does it there are more than 10 items.

I guess it's by design, that it doesn't need to filter as you can see all possible items in the listbox?

Many thanks,

Jason

former_member182650
Contributor
‎01-22-2014 11:50 AM
0 Kudos

Hi Robin!

If you set displaySecondaryValues = false in your DropdownBox as a parameter. The second behaviour is produced always. Maybe it's a natural behaviour of component and you must override to act always as your first case.

Kind regards

Show replies
Show replies
Ask a Question