cancel
Showing results for 
Search instead for 
Did you mean: 

contains search for MultiComboBox SAPUI5

Hello Experts,

the default behavior of the sap.m.MultiComboBox is to search from the beginning of the string.

But,how can we achieve the contains search for MultiComboBox SAPUI5?

search should work for any character in the string.

Regards,

Pavan.

Accepted Solutions (0)

Answers (1)

Answers (1)

0 Kudos

I think you may overwirte the MultiComboBox control with this functionality.
In case it can help I did something similar for ComboBox :

sap.ui.define([
		"sap/m/ComboBox",
		"sap/m/ComboBoxBase"
	],
	function (oComboBox, oComboBoxBase) {
		"use strict";
		var ComboBox = oComboBox.extend("/*yourNameSpaceHere*/.control.ComboBoxContain", {
			metadata: {
				
			},
			renderer:{
				
			}
		});
		ComboBox.prototype.filterItems = function(mOptions, aItems) {
			var sProperty = mOptions.property,
				sValue = mOptions.value,
				bEmptyValue = sValue === "",
				bMatch = false,
				sMutator = "get" + sProperty.charAt(0).toUpperCase() + sProperty.slice(1),
				aFilteredItems = [],
				oItem = null;


			aItems = aItems || this.getItems();
			if (!bEmptyValue) {
				for (var i = 0; i < aItems.length; i++) {
	
					oItem = aItems[i];
	
					// the item match with the value
					bMatch = (oItem[sMutator]().match(new RegExp(sValue, "i")) !== null);
	
					if (bMatch) {
						aFilteredItems.push(oItem);
					}
	
					this._setItemVisibility(oItem, bMatch);
				}
			}
			return aFilteredItems;
		};
		ComboBox.prototype.oninput = function(oEvent) {
			oComboBoxBase.prototype.oninput.apply(this, arguments);


			// note: input event can be buggy
			// @see sap.m.InputBase#oninput
			if (oEvent.isMarked("invalid")) {
				return;
			}


			var bToggleOpenState = (this.getPickerType() === "Dropdown");


			this.loadItems(function() {
				var oSelectedItem = this.getSelectedItem(),
					sValue = oEvent.target.value,
					bEmptyValue = sValue === "",
					oControl = oEvent.srcControl,
					aVisibleItems;


				if (bEmptyValue && !this.bOpenedByKeyboardOrButton) {
					aVisibleItems = this.getItems();
				} else {
					aVisibleItems = this.filterItems({
						property: "text",
						value: sValue
					});
				}


				var bItemsVisible = !!aVisibleItems.length;
				var oFirstVisibleItem = aVisibleItems[0]; // first item that matches the value
				var bDesktopPlatform = sap.ui.Device.system.desktop;


				if (!bEmptyValue && oFirstVisibleItem && oFirstVisibleItem.getEnabled()) {


					this.setSelection(oFirstVisibleItem);


					if (oSelectedItem !== this.getSelectedItem()) {
						this.fireSelectionChange({
							selectedItem: this.getSelectedItem()
						});
					}


					if (oControl._bDoTypeAhead) {


						if (bDesktopPlatform) {
							fnSelectTextIfFocused.call(oControl, sValue.length, oControl.getValue().length);
						} else {
							// timeout required for an Android and Windows Phone bug
							setTimeout(fnSelectTextIfFocused.bind(oControl, sValue.length, oControl.getValue().length), 0);
						}
					}
				}


				if (bEmptyValue || !bItemsVisible) {
					this.setSelection(null);


					if (oSelectedItem !== this.getSelectedItem()) {
						this.fireSelectionChange({
							selectedItem: this.getSelectedItem()
						});
					}
				}


				if (bItemsVisible) {
					if (bEmptyValue && !this.bOpenedByKeyboardOrButton) {
						this.close();
					} else if (bToggleOpenState) {
						this.open();
						this.scrollToItem(this.getSelectedItem());
					}
				} else if (this.isOpen()) {
					if (bToggleOpenState) {
						this.close();
					}
				} else {
					this.clearFilter();
				}
			}, {
				name: "input",
				busyIndicator: false
			});


			// if the loadItems event is being processed,
			// we need to open the dropdown list to show the busy indicator
			if (this.bProcessingLoadItemsEvent && bToggleOpenState) {
				this.open();
			}
		};
		function fnSelectTextIfFocused(iStart, iEnd) {
			if (document.activeElement === this.getFocusDomRef()) {
				this.selectText(iStart, iEnd);
			}
		}
		return ComboBox;
	});