sap.m.ComboBox - Search by partial string

[former_member182374]

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

[former_member182372 · Accepted solution]

only by redefining

oninput

ComboBox.prototype.oninput = function(oEvent) {

....

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

[former_member182374 · Accepted solution]

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