Skip to Content
avatar image
Former Member

Combobox is not behaving as described.

If you take a look at this description of combo-box in here from experience Fiori Design Web.

Size S example has Meters in the text field and the results displayed contain the text at any part of the string, not just the beginning.

However the example here - in hana explored website does not behave in the same way. The results it show contain only the ones which have the search string at the beginning.

Looking for a solution to filter items of combobox which contain text in any part of the string in version 1.36.12.

Thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • May 02, 2017 at 02:46 PM

    Size S, M and L, is for the screen size and not the combo box.

    Size S, when the screen is viewed in mobile and M - Tablet and L is large or generally in laptop or desktop screens.

    Use Select or ComboBox. You can filter the contents in the dropdown or select from the list of values in it.

    Regards,

    Sharath

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Thanks for the quick Reply. My problem is with Custom Filtering. I have partially solved the problem.

      1. Filtering the results if any part of the string matches. Not just from the beginning - Done using custom filter
      2. But after filtering, the dropdown is not active. User has to click the down arrow explicitly even though there are results. - This is where I need help

      Below is my code

      XML -

      <ComboBox 
          id="myDropdown"
      	width="100%"
      	value="{/selectedCustomer}"
      	items="{
      		path: '/Customers',
      		sorter: { path: 'Name' }
      	}">
      		<items>
      			<core:ListItem key="{Name}" text="{Name}"/>
      		</items>
      </ComboBox>
      

      Javascript -

      onInit : function () {
      	var vm = this;
      	var myDrpdn = vm.getView().byId("myDropdown");
      	var keyupListener = function (oEvt) {
      	    if (((oEvt.keyCode || oEvt.which) == 38) || ((oEvt.keyCode || oEvt.which) == 40)) {
      	    	// No filtering to be done when user is clicking up or down arrows
      	    	return false;
      	    }
      	    var textID = '#' + myDrpdn.sId + '-inner'
      	    var enteredText = $(textID).val();
      	    vm.testFunction(enteredText);
      	};
      
      
      // Had to attach an event because there is no livechange or similar property on sap.m.combobox
      	myDrpdn.attachBrowserEvent("keyup", keyupListener); 	
      }
      testFunction : function (searchString) {
          var aFiltersComboBox = [];
          // Filtering on Name field based on searchString
          var oFilterComboBox = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, searchString);
          aFiltersComboBox.push(oFilterComboBox);
          this.getView().byId('myDropdown').getBinding("items").filter(aFiltersComboBox);
      }