Skip to Content

sap.m.ComboBox - Search by partial string

Hello Experts,

The sap.m.ComboBox allows the user to enter string for search in combobox.

The default behavior is to search from the beginning of the string.

How can I change the default behavior in a way that partial string will also work?

For example:

Combo values are:

ABC

DEF

GHI

When user typing E I need that DEF will be selected.

Regards,

Omri

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Apr 12, 2016 at 04:46 PM

    only by redefining

    oninput

    ComboBox.prototype.oninput = function(oEvent) {

    ....

    bMatch = jQuery.sap.startsWithIgnoreCase(oItem.getText(), sValue);

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Maxim,

      I redefined the control:

      "use strict";
      
      jQuery.sap.declare("cohen.omri.controls.ComboBox");
      
      jQuery.sap.require("sap.m.ComboBox");
      jQuery.sap.require("sap.m.ComboBoxRenderer");
      jQuery.sap.require("sap.m.ComboBoxBase");
      
      sap.m.ComboBox.extend("cohen.omri.controls.ComboBox", {
           renderer: "sap.m.ComboBoxRenderer",
             
            oninput : function(oEvent) {
                  sap.m.ComboBoxBase.prototype.oninput.apply(this, arguments);
      
            // note: suppress input events of read-only fields (IE11)
            if (!this.getEditable()) {
                  return;
            }
      
            var oSelectedItem = this.getSelectedItem(),
                  aItems = this.getItems(),
                  oInputDomRef = oEvent.target,
                  sValue = oInputDomRef.value,
                  bFirst = true,
                  bVisibleItems = false,
                  oItem,
                  bMatch,
                  oListItem,
                  i = 0;
      
            for (; i < aItems.length; i++) {
      
                  // the item match with the value
                  oItem = aItems[i];
                  
                  // ---------------------------------------------------------------------------
                  // Change #1
                  //bMatch = jQuery.sap.startsWithIgnoreCase(oItem.getText(), sValue);
                  bMatch = ((oItem.getText()).indexOf(sValue) > -1); 
                  // ---------------------------------------------------------------------------
                  
                  oListItem = this.getListItem(oItem);
      
                  if (sValue === "") {
                        bMatch = true;
                  }
      
                  // toggle the visibility of the items according to the value
                  oListItem.setVisible(bMatch);
      
                  if (bMatch && !bVisibleItems) {
                        bVisibleItems = true;
                  }
      
                  // first match of the value
                  if (bFirst && bMatch && sValue !== "") {
                        bFirst = false;
      
              // ---------------------------------------------------------------------------
                  // Change #2
                        /* 
                        if (this._bDoTypeAhead) {
                              this.updateDomValue(oItem.getText());
                        }
                        */
                  // ---------------------------------------------------------------------------
      
                        this.setSelection(oItem, { suppressInvalidate: true });
      
                        if (oSelectedItem !== this.getSelectedItem()) {
                              this.fireSelectionChange({ selectedItem: this.getSelectedItem() });
                        }
      
                        if (this._bDoTypeAhead) {
                              this.selectText(sValue.length, 9999999);
                        }
      
                        this.scrollToItem(this.getList().getSelectedItem());
                  }
            }
      
            if (sValue === "" || !bVisibleItems) {
                  this.setSelection(null, { suppressInvalidate: true });
      
                  if (oSelectedItem !== this.getSelectedItem()) {
                        this.fireSelectionChange({ selectedItem: this.getSelectedItem() });
                  }
            }
      
            // open the picker on input
            if (bVisibleItems) {
                  this.open();
            } else {
                  this.isOpen() ? this.close() : this.clearFilter();
            }
      }
      });
      

      Another change is updating the DOM value after selectionChange event (by using updateDomValue function).

      Basically it works but sometimes the selectionChanged event is not fired when an entry is selected (pressing enter, leaving the control or some other event is needed).

      Do I need to redefine the selectionChanged event as well?

      SAPUI5 version is 1.28.7.

      Regards,

      Omri