@danielgindi/selectbox 1.0.146 → 2.0.0

package/dist/lib.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.146
+ * @danielgindi/selectbox 2.0.0
  * git://github.com/danielgindi/selectbox.git
  */
 (function (global, factory) {
@@ -10,9 +10,57 @@
 
     var escapeRegex = (value) => value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 
+    const throttle = (func, wait, options) => {
+      let timeout, context, args, result;
+      let previous = 0;
+      if (!options) options = {};
+
+      const later = () => {
+        previous = options.leading === false ? 0 : Date.now();
+        timeout = null;
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      };
+
+      const throttled = function () {
+        const now = Date.now();
+        if (!previous && options.leading === false)
+        previous = now;
+
+        const remaining = wait - (now - previous);
+        context = this;
+        args = arguments;
+        if (remaining <= 0 || remaining > wait) {
+          if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+          }
+          previous = now;
+          result = func.apply(context, args);
+          if (!timeout) context = args = null;
+        } else if (!timeout && options.trailing !== false) {
+          timeout = setTimeout(later, remaining);
+        }
+        return result;
+      };
+
+      throttled.cancel = () => {
+        clearTimeout(timeout);
+        previous = 0;
+        timeout = context = args = null;
+      };
+
+      throttled.isScheduled = () => {
+        return !!timeout;
+      };
+
+      return throttled;
+    };
+
     const ItemSymbol$1 = Symbol('item');
     const DestroyedSymbol$1 = Symbol('destroyed');
     const GhostSymbol = Symbol('ghost');
+    const NoResultsItemSymbol = Symbol('no_results_items');
 
     const hasOwnProperty = Object.prototype.hasOwnProperty;
 
@@ -38,7 +86,17 @@
      * @property {string} [valueProp='value']
      * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderItem] Function to call when rendering an item element
      * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderItem] Function to call when rendering an item element
+     * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderNoResultsItem]
+     * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
      * @property {function(name: string, data: *)} [on]
+     * @property {boolean} [searchable=false] include inline search box
+     * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
+     * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
+     * @property {boolean} [filterOnEmptyTerm=false] call the filter function on empty search term too
+     * @property {boolean} [filterGroups=false] should groups be filtered?
+     * @property {boolean} [filterEmptyGroups=false] should empty groups be filtered out?
+     * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
+     * @property {function(dropList: DropList):DropList.PositionOptions} [positionOptionsProvider]
      * */
     /** */
 
@@ -101,7 +159,14 @@
       labelProp: 'label',
       valueProp: 'value',
 
-      on: null
+      on: null,
+
+      searchable: false,
+      noResultsText: 'No matching results',
+      filterThrottleWindow: 300,
+      filterOnEmptyTerm: false,
+      filterGroups: false,
+      filterEmptyGroups: false
     };
 
     /*
@@ -162,17 +227,35 @@
           valueProp: o.valueProp,
           renderItem: o.renderItem,
           unrenderItem: o.unrenderItem,
+          renderNoResultsItem: o.renderNoResultsItem,
+          unrenderNoResultsItem: o.unrenderNoResultsItem,
           on: o.on || null,
+          positionOptionsProvider: o.positionOptionsProvider ?? null,
+
+          searchable: o.searchable,
+
           silenceEvents: true,
           mitt: mitt(),
 
+          filterThrottleWindow: o.filterThrottleWindow,
+          filterOnEmptyTerm: o.filterOnEmptyTerm,
+          filterGroups: o.filterGroups,
+          filterEmptyGroups: o.filterEmptyGroups,
+          filterFn: o.filterFn,
+          filteredItems: null,
+          filterTerm: '',
+          needsRefilter: false,
+          throttledRefilterItems: null,
+
           focusItemIndex: -1,
           focusItemEl: null,
 
           sink: new DomEventsSink()
         };
 
-        let classes = [p.baseClassName];
+        const baseClass = p.baseClassName + '_wrapper';
+
+        let classes = [baseClass];
 
         if (p.additionalClasses) {
           classes = classes.concat((p.additionalClasses + '').split(' ').filter((x) => x));
@@ -183,31 +266,54 @@
           top: '-9999px'
         };
 
-        let el = o.el;
-        if (el instanceof Element) {
-          p.elOriginalDisplay = el.style.display || '';
-          el.classList.add(...classes);
-          el.role = 'menu';
-          Css.setCssProps(/**@type ElementCSSInlineStyle*/el, initialCss);
+        let wrapperEl = o.el;
+
+        if (wrapperEl instanceof Element) {
+          p.elOriginalDisplay = wrapperEl.style.display || '';
+          wrapperEl.classList.add(...classes);
+          Css.setCssProps(/**@type ElementCSSInlineStyle*/wrapperEl, initialCss);
           p.ownsEl = false;
         } else {
-          el = Dom.createElement('ul', {
+          wrapperEl = Dom.createElement('div', {
             class: classes.join(' '),
-            role: 'menu',
             css: initialCss
           });
         }
 
-        p.el = el;
+        let menuEl = Dom.createElement('ul');
+        menuEl.role = 'menu';
 
-        p.items = [];
+        if (o.searchable) {
+          p.headerEl = Dom.createElement('div', {
+            class: p.baseClassName + '_header'
+          });
 
-        p.groupCount = 0; // This will keep state of how many `group` items we have
+          p.searchInput = Dom.createElement('input', {
+            type: 'search',
+            role: 'searchbox',
+            tabindex: '0',
+            autocorrect: 'off',
+            autocomplete: 'off',
+            autocapitalize: 'off',
+            spellcheck: 'false',
+            'aria-autocomplete': 'list'
+          });
+
+          p.headerEl.appendChild(p.searchInput);
+          wrapperEl.appendChild(p.headerEl);
+        }
 
+        wrapperEl.appendChild(menuEl);
+
+        p.el = wrapperEl;
+        p.menuEl = menuEl;
+
+        p.items = [];
+        p.groupCount = 0; // This will keep state of how many `group` items we have
         p.mouseHandled = false;
 
         p.virtualListHelper = new VirtualListHelper({
-          list: p.el,
+          list: p.menuEl,
           virtual: true,
           buffer: 5,
           estimatedItemHeight: o.estimatedItemHeight || 20,
@@ -234,7 +340,19 @@
               };
               itemEl.setAttribute('aria-hidden', 'true');
             } else {
-              item = p.items[index];
+              const items = p.filteredItems ?? p.items;
+              if (items.length === 0 && p.noResultsText) {
+                item = {
+                  value: NoResultsItemSymbol,
+                  label: p.noResultsText,
+                  _nointeraction: true,
+                  _nocheck: true,
+
+                  [ItemSymbol$1]: NoResultsItemSymbol
+                };
+              } else {
+                item = items[index];
+              }
             }
 
             if (!item) {
@@ -280,36 +398,20 @@
           }
         });
 
-        if (typeof p.unrenderItem === 'function') {
-          const fn = p.unrenderItem;
-          p.virtualListHelper.setOnItemUnrender((el) => {
-            try {
-              fn(el[ItemSymbol$1][ItemSymbol$1], el);
-            } catch (err) {
-              console.error(err); // eslint-disable-line no-console
-            }
-            delete el[ItemSymbol$1];
-
-            if (p.focusItemEl === el)
-            p.focusItemEl = null;
-          });
-        } else {
-          p.virtualListHelper.setOnItemUnrender((el) => {
-            delete el[ItemSymbol$1];
-
-            if (p.focusItemEl === el)
-            p.focusItemEl = null;
-          });
-        }
+        this._setupUnrenderFunction();
 
         if (p.capturesFocus) {
-          el.tabIndex = 0;
+          wrapperEl.tabIndex = 0;
         }
 
+        this.setFilterThrottleWindow(o.filterThrottleWindow);
+        this.setNoResultsText(o.noResultsText);
+
         this._hookMouseEvents();
         this._hookTouchEvents();
         this._hookFocusEvents();
         this._hookKeyEvents();
+        this._hookSearchEvents();
 
         this.silenceEvents = false;
       }
@@ -327,7 +429,7 @@
         p.sink.remove();
         p.virtualListHelper.destroy();
 
-        if (p.el) {
+        if (p.el?.parentNode) {
           DomCompat.remove(p.el);
         }
 
@@ -336,13 +438,15 @@
           p.currentSubDropList = null;
         }
 
+        if (p.throttledRefilterItems)
+        p.throttledRefilterItems.cancel();
+
         if (!p.ownsEl) {
           for (let name of Array.from(p.el.classList)) {
             if (name.startsWith(p.baseClassName)) {
               p.el.classList.remove(name);
             }
           }
-          p.el.removeAttribute('role');
           for (let key of ['position', 'left', 'top', 'right', 'bottom', 'z-index']) {
             p.el.style[key] = '';
           }
@@ -357,6 +461,8 @@
           delete p.lastPositionTarget;
         }
 
+        delete p.lastPositionOptions;
+
         this._p = null;
       }
 
@@ -440,16 +546,47 @@
        */
       setUnrenderItem(fn) {
         const p = this._p;
-
         p.unrenderItem = fn;
+        this._setupUnrenderFunction();
+        return this;
+      }
 
-        if (typeof p.unrenderItem === 'function') {
+      /**
+       * @param {(function(item: DropList.ItemBase, itemEl: Element):(*|false))|null} render
+       * @param {(function(item: DropList.ItemBase, itemEl: Element))|null} unrender
+       * @returns {DropList}
+       */
+      setRenderNoResultsItem(render, unrender) {
+        const p = this._p;
+        p.renderNoResultsItem = render;
+        p.unrenderNoResultsItem = unrender;
+        this._setupUnrenderFunction();
+        return this;
+      }
+
+      /**
+       * @private
+       */
+      _setupUnrenderFunction() {
+        const p = this._p;
+
+        if (typeof p.unrenderItem === 'function' || typeof p.unrenderNoResultsItem === 'function') {
           const fn = p.unrenderItem;
+          const fnNoResults = p.unrenderNoResultsItem;
           p.virtualListHelper.setOnItemUnrender((el) => {
-            try {
-              fn(el[ItemSymbol$1][ItemSymbol$1], el);
-            } catch (err) {
-              console.error(err); // eslint-disable-line no-console
+            const item = el[ItemSymbol$1];
+            if (item === NoResultsItemSymbol) {
+              try {
+                fnNoResults(item, el);
+              } catch (err) {
+                console.error(err); // eslint-disable-line no-console
+              }
+            } else {
+              try {
+                fn(item[ItemSymbol$1], el);
+              } catch (err) {
+                console.error(err); // eslint-disable-line no-console
+              }
             }
             delete el[ItemSymbol$1];
 
@@ -484,7 +621,8 @@
         if (!el)
         return;
 
-        let classes = [p.baseClassName];
+        const baseClass = p.baseClassName + '_wrapper';
+        let classes = [baseClass];
 
         if (p.direction === 'ltr' || p.direction === 'rtl')
         classes.push(`${p.baseClassName}__` + p.direction);
@@ -511,7 +649,8 @@
           p.focusItemEl = null;
         }
 
-        const item = p.items[p.focusItemIndex];
+        const items = p.filteredItems ?? p.items;
+        const item = items[p.focusItemIndex];
         p.focusItemIndex = -1;
 
         if (!item) {
@@ -662,9 +801,24 @@
           }
         }
 
-        p.virtualListHelper.
-        addItemsAt(itemsToAdd.length, atIndex === -1 ? atIndex : atIndex - itemsToAdd.length).
-        render();
+        if (!p.filteredItems) {
+          let hadNoResultItem = p.hasNoResultsItem;
+          p.hasNoResultsItem = p.items.length === 0 && !!p.noResultsText;
+          if (p.hasNoResultsItem) {
+            p.virtualListHelper.
+            setCount(1).
+            render();
+          } else {
+            if (hadNoResultItem)
+            p.virtualListHelper.removeItemsAt(1, 0);
+
+            p.virtualListHelper.
+            addItemsAt(itemsToAdd.length, atIndex === -1 ? atIndex : atIndex - itemsToAdd.length).
+            render();
+          }
+        } else {
+          p.needsRefilter = true;
+        }
 
         return this;
       }
@@ -678,9 +832,11 @@
         const p = this._p;
 
         p.items.length = 0;
+        p.filteredItems = null;
         p.groupCount = 0;
 
-        p.virtualListHelper.setCount(0);
+        p.hasNoResultsItem = !!p.noResultsText;
+        p.virtualListHelper.setCount(p.hasNoResultsItem ? 1 : 0);
 
         this.addItems(items);
         this.updateSublist();
@@ -731,9 +887,18 @@
         if (hasOwnProperty.call(newItem, '_child'))
         item._child = !!newItem._child;
 
-        if (p.virtualListHelper.isItemRendered(itemIndex)) {
+        let virtualItemIndex = itemIndex;
+        if (p.filteredItems) {
+          virtualItemIndex = p.filteredItems.indexOf(item);
+          if (virtualItemIndex !== -1) {
+            p.filteredItems.splice(virtualItemIndex, 1);
+          }
+        }
+
+        if (virtualItemIndex !== -1 &&
+        p.virtualListHelper.isItemRendered(virtualItemIndex)) {
           p.virtualListHelper.
-          refreshItemAt(itemIndex).
+          refreshItemAt(virtualItemIndex).
           render();
         }
 
@@ -752,9 +917,27 @@
           p.groupCount--;
         }
 
-        p.virtualListHelper.
-        removeItemsAt(itemIndex, 1).
-        render();
+        let virtualItemIndex = itemIndex;
+        if (p.filteredItems) {
+          virtualItemIndex = p.filteredItems.indexOf(spliced[0]);
+          if (virtualItemIndex !== -1) {
+            p.filteredItems.splice(virtualItemIndex, 1);
+          }
+        }
+
+        if (virtualItemIndex !== -1) {
+          p.hasNoResultsItem = (p.filteredItems ?? p.items).length === 0 && !!p.noResultsText;
+
+          if (p.hasNoResultsItem) {
+            p.virtualListHelper.
+            setCount(1).
+            render();
+          } else {
+            p.virtualListHelper.
+            removeItemsAt(virtualItemIndex, 1).
+            render();
+          }
+        }
 
         return this;
       }
@@ -763,10 +946,13 @@
         const p = this._p;
 
         p.items.length = 0;
+        p.filteredItems = null;
         p.groupCount = 0;
 
+        p.hasNoResultsItem = !!p.noResultsText;
+
         p.virtualListHelper.
-        setCount(0).
+        setCount(p.hasNoResultsItem ? 1 : 0).
         render();
 
         return this;
@@ -802,8 +988,23 @@
       itemIndexByValue(value) {
         const p = this._p;
 
-        for (let i = 0, count = p.items.length; i < count; i++) {
-          let item = p.items[i];
+        const items = p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+          let item = items[i];
+          if (item.value === value) {
+            return i;
+          }
+        }
+
+        return -1;
+      }
+
+      filteredItemIndexByValue(value) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+          let item = items[i];
           if (item.value === value) {
             return i;
           }
@@ -815,8 +1016,23 @@
       itemIndexByValueOrLabel(value, label) {
         const p = this._p;
 
-        for (let i = 0, count = p.items.length; i < count; i++) {
-          let item = p.items[i];
+        const items = p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+          let item = items[i];
+          if (item.value === value || item.label === label) {
+            return i;
+          }
+        }
+
+        return -1;
+      }
+
+      filteredItemIndexByValueOrLabel(value, label) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+        for (let i = 0, count = items.length; i < count; i++) {
+          let item = items[i];
           if (item.value === value || item.label === label) {
             return i;
           }
@@ -825,6 +1041,36 @@
         return -1;
       }
 
+      itemIndexByItem(item) {
+        const p = this._p;
+
+        const items = p.items;
+
+        for (let i = 0, count = items.length; i < count; i++) {
+          let it = items[i];
+          if (it[ItemSymbol$1] === item) {
+            return i;
+          }
+        }
+
+        return -1;
+      }
+
+      filteredItemIndexByItem(item) {
+        const p = this._p;
+
+        const items = p.filteredItems ?? p.items;
+
+        for (let i = 0, count = items.length; i < count; i++) {
+          let it = items[i];
+          if (it[ItemSymbol$1] === item) {
+            return i;
+          }
+        }
+
+        return -1;
+      }
+
       items() {
         return this._p.items.map((x) => x[ItemSymbol$1]);
       }
@@ -841,19 +1087,320 @@
         return this._p.items[index]?.[ItemSymbol$1];
       }
 
+      filteredItemAtIndex(index) {
+        const p = this._p;
+        const items = p.filteredItems ?? p.items;
+        return items[index]?.[ItemSymbol$1];
+      }
+
+      /**
+       * @param {function(dropList: DropList):DropList.PositionOptions} fn
+       * @returns {DropList}
+       */
+      setPositionOptionsProvider(fn) {
+        const p = this._p;
+        if (p.positionOptionsProvider === fn)
+        return this;
+        p.positionOptionsProvider = fn ?? null;
+        this.relayout();
+        return this;
+      }
+
+      /**
+       * @returns {function(dropList: DropList):DropList.PositionOptions|null}
+       */
+      getPositionOptionsProvider() {
+        const p = this._p;
+        return p.positionOptionsProvider;
+      }
+
+      /**
+       * @param {string} term
+       * @param {boolean} [performSearch=false] should actually perform the search, or just set the input's text?
+       * @returns {DropList}
+       */
+      setSearchTerm(term) {let performSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        const p = this._p;
+
+        if (p.searchInput) {
+          p.searchInput.value = term;
+        }
+
+        if (performSearch) {
+          p.filterTerm = term.trim();
+          p.filteredItems = null;
+
+          this._trigger('search', { value: term });
+          p.throttledRefilterItems();
+        }
+
+        return this;
+      }
+
+      isFilterPending() {
+        const p = this._p;
+
+        return !!(p.throttledRefilterItems.isScheduled() ||
+        !p.filteredItems && (p.filterTerm || p.filterOnEmptyTerm && p.filterFn));
+      }
+
+      /** @private */
+      _refilterItems() {
+        const p = this._p;
+
+        const term = p.filterTerm;
+        const filterGroups = p.filterGroups;
+        const filterEmptyGroups = p.filterEmptyGroups;
+
+        if (term || p.filterOnEmptyTerm && p.filterFn) {
+          let fn = p.filterFn;
+
+          let filteredItems;
+
+          if (typeof fn === 'function') {
+            filteredItems = p.filterFn(p.items, term);
+          }
+
+          // If there was no filter function, or it gave up on filtering.
+          if (!Array.isArray(filteredItems)) {
+            if (term) {
+              const matcher = new RegExp(escapeRegex(term), 'i');
+              const labelProp = p.labelProp;
+
+              filteredItems = p.items.filter((x) => {
+                if (!filterGroups && x._group) return true;
+                return matcher.test(x[labelProp]);
+              });
+            } else {
+              filteredItems = null;
+            }
+          }
+
+          p.filteredItems = filteredItems;
+
+          if (filteredItems && filterEmptyGroups) {
+            // Clean up groups without children
+
+            let lastGroup = -1;
+            let len = filteredItems.length;
+
+            for (let i = 0; i < len; i++) {
+              let item = filteredItems[i];
+
+              if (item._group) {
+                if (lastGroup !== -1 && lastGroup === i - 1) {
+                  // It was an empty group
+                  filteredItems.splice(lastGroup, 1);
+                  i--;
+                  len--;
+                }
+
+                lastGroup = i;
+              }
+            }
+
+            if (lastGroup !== -1) {
+              if (lastGroup === len - 1) {
+                // It was an empty group
+                filteredItems.splice(lastGroup, 1);
+              }
+            }
+          }
+        } else {
+          p.filteredItems = null;
+        }
+
+        this.needsRefilter = false;
+
+        const items = p.filteredItems ?? p.items;
+        p.hasNoResultsItem = items.length === 0 && !!p.noResultsText;
+        p.virtualListHelper.
+        setCount(items.length + (p.hasNoResultsItem ? 1 : 0)).
+        render();
+
+        this._trigger('itemschanged', { term: term, mutated: false, count: this.getFilteredItemCount() });
+        this.relayout();
+      }
+
+      invokeRefilter() {
+        const p = this._p;
+        if (!p.filterTerm && !p.filterOnEmptyTerm && !p.filteredItems)
+        return this;
+        p.filteredItems = null;
+        p.throttledRefilterItems();
+        return this;
+      }
+
+      getFilteredItemCount() {
+        const p = this._p;
+
+        if (p.needsRefilter)
+        this._refilterItems();
+
+        if (p.filteredItems)
+        return p.filteredItems.length;
+
+        if (p.items)
+        return p.items.length;
+
+        return 0;
+      }
+
+      /**
+       * @param {string} noResultsText
+       * @returns {DropList}
+       */
+      setNoResultsText(noResultsText) {
+        this._p.noResultsText = noResultsText;
+        return this;
+      }
+
+      /**
+       * @returns {string}
+       */
+      getNoResultsText() {
+        return this._p.noResultsText;
+      }
+
+      /**
+       * @param {number} window
+       * @returns {DropList}
+       */
+      setFilterThrottleWindow(window) {
+        const p = this._p;
+        p.filterThrottleWindow = window;
+
+        let isScheduled = p.throttledRefilterItems ? p.throttledRefilterItems.isScheduled() : false;
+
+        if (p.throttledRefilterItems)
+        p.throttledRefilterItems.cancel();
+
+        p.throttledRefilterItems = throttle(() => this._refilterItems(), p.filterThrottleWindow, true);
+
+        if (isScheduled)
+        p.throttledRefilterItems();
+
+        return this;
+      }
+
+      /**
+       * @returns {number}
+       */
+      getFilterThrottleWindow() {
+        return this._p.filterThrottleWindow;
+      }
+
+      /**
+       * @param {boolean} value
+       * @returns {DropList}
+       */
+      setFilterOnEmptyTerm(value) {
+        const p = this._p;
+        if (p.filterOnEmptyTerm === value)
+        return this;
+        p.filterOnEmptyTerm = value;
+        p.throttledRefilterItems();
+        return this;
+      }
+
+      /**
+       * @returns {boolean}
+       */
+      getFilterOnEmptyTerm() {
+        return this._p.filterOnEmptyTerm;
+      }
+
+      /**
+       * @param {boolean} value
+       * @returns {DropList}
+       */
+      setFilterGroups(value) {
+        const p = this._p;
+        if (p.filterGroups === value)
+        return this;
+        p.filterGroups = value;
+        p.throttledRefilterItems();
+        return this;
+      }
+
+      /**
+       * @returns {boolean}
+       */
+      getFilterGroups() {
+        return this._p.filterGroups;
+      }
+
+      /**
+       * @param {boolean} value
+       * @returns {DropList}
+       */
+      setFilterEmptyGroups(value) {
+        const p = this._p;
+        if (p.filterEmptyGroups === value)
+        return this;
+        p.filterEmptyGroups = value;
+        p.throttledRefilterItems();
+        return this;
+      }
+
+      /**
+       * @returns {boolean}
+       */
+      getFilterEmptyGroups() {
+        return this._p.filterEmptyGroups;
+      }
+
+      /**
+       * @param {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} fn
+       * @returns {DropList}
+       */
+      setFilterFn(fn) {
+        const p = this._p;
+        if (p.filterFn === fn)
+        return this;
+        p.filterFn = fn;
+        p.throttledRefilterItems();
+        return this;
+      }
+
+      /**
+       * @returns {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)}
+       */
+      getFilterFn() {
+        return this._p.filterFn;
+      }
+
       /**
        *
-       * @param {DropList.PositionOptions} positionOptions
+       * @param {DropList.PositionOptions} [positionOptions]
        * @returns {DropList}
        * @public
        */
       relayout(positionOptions) {
-        const p = this._p,el = p.el;
+        const p = this._p,el = p.el,menuEl = p.menuEl;
 
         if (!this.isVisible()) return this;
 
         let w = window;
 
+        if (!positionOptions)
+        positionOptions = p.positionOptionsProvider?.() ?? p.lastPositionOptions;
+
+        // Supply some default for extreme cases, no crashing
+        if (!positionOptions) {
+          positionOptions = {
+            targetOffset: {
+              left: window.innerWidth / 2,
+              top: window.innerHeight / 2
+            },
+            targetWidth: 0,
+            targetHeight: 0,
+            position: { x: 'center', y: 'center' },
+            anchor: { x: 'center', y: 'center' },
+            targetRtl: getComputedStyle(document.body).direction === 'rtl'
+          };
+        }
+
         let targetBox = {};
 
         let offset = positionOptions.targetOffset || Css.getElementOffset(positionOptions.target);
@@ -916,18 +1463,25 @@
         let verticalBorderWidth = (parseFloat(elComputedStyle.borderTopWidth) || 0) + (
         parseFloat(elComputedStyle.borderBottomWidth) || 0);
 
+        let headerHeight = 0;
+        if (p.headerEl) {
+          headerHeight = Css.getElementHeight(p.headerEl, true, true);
+        }
+
         if (p.virtualListHelper.isVirtual()) {
           maxViewHeight =
           p.virtualListHelper.estimateFullHeight() +
           verticalPadding +
-          verticalBorderWidth;
+          verticalBorderWidth +
+          headerHeight;
         } else {
           // Another method to calculate height is measuring the whole thing at once.
           // This causes relayout of course.
           el.style.height = '';
+          menuEl.style.height = '';
           el.style.top = '-9999px';
 
-          maxViewHeight = Math.max(Css.getElementHeight(p.el), el.scrollHeight);
+          maxViewHeight = Math.max(Css.getElementHeight(p.el), menuEl.scrollHeight);
           maxViewHeight += verticalPadding + verticalBorderWidth;
         }
 
@@ -1062,6 +1616,11 @@
         Css.setCssProps(el, viewCss);
         Css.setElementHeight(el, viewSize.height, true, true);
 
+        if (menuEl !== el) {
+          let menuHeight = viewSize.height - headerHeight - verticalBorderWidth - verticalPadding;
+          Css.setElementHeight(menuEl, menuHeight, true, true);
+        }
+
         // Update the scroll position for virtual lists
         p.virtualListHelper.render();
 
@@ -1199,7 +1758,7 @@
 
       /**
        *
-       * @param {DropList.PositionOptions?} positionOptions
+       * @param {DropList.PositionOptions?} [positionOptions]
        * @returns {DropList}
        * @public
        */
@@ -1226,6 +1785,10 @@
           }
         });
 
+        if (p.needsRefilter) {
+          this._refilterItems();
+        }
+
         const el = p.el;
         el.style.position = 'absolute';
         el.classList.remove(`${p.baseClassName}__is-hiding`);
@@ -1237,6 +1800,14 @@
         if (getComputedStyle(p.el).display === 'none')
         p.el.style.display = 'block';
 
+        p.lastPositionOptions = null;
+
+        if (positionOptions === undefined) {
+          positionOptions = p.positionOptionsProvider?.() ?? p.lastPositionOptions;
+        } else {
+          p.lastPositionOptions = positionOptions;
+        }
+
         if (positionOptions) {
           const elComputedStyle = getComputedStyle(el);
 
@@ -1283,6 +1854,11 @@
 
           p.hiding = true;
 
+          if (this.isFilterPending()) {
+            p.throttledRefilterItems.cancel();
+            p.needsRefilter = true;
+          }
+
           if (el) {
 
             el.classList.add(`${p.baseClassName}__is-hiding`);
@@ -1303,6 +1879,7 @@
                 }
               });
             } else {
+              if (el.parentNode)
               DomCompat.remove(el);
               el.classList.remove(`${p.baseClassName}__is-hiding`);
             }
@@ -1352,15 +1929,22 @@
       setFocusedItemAtIndex(itemIndex) {
         const p = this._p;
 
+        if (p.filteredItems) {
+          const item = p.items[itemIndex];
+          itemIndex = p.items.indexOf(item);
+        }
+
         p.focusItemIndex = itemIndex;
 
+        const items = p.filteredItems ?? p.items;
+
         let item = null;
         if (itemIndex > -1)
-        item = p.items[itemIndex];
+        item = items[itemIndex];
         if (item && item._nointeraction)
         item = null;
         if (itemIndex > -1) {
-          this.scrollItemIndexIntoView(itemIndex);
+          this._scrollItemIndexIntoView(itemIndex);
         }
         let itemElement = item ? p.virtualListHelper.getItemElementAt(itemIndex) : null;
 
@@ -1414,7 +1998,8 @@
           labelProp: p.labelProp,
           valueProp: p.valueProp,
           renderItem: p.renderItem,
-          unrenderItem: p.unrenderItem
+          unrenderItem: p.unrenderItem,
+          positionOptionsProvider: () => p.currentSubDropList.showOptions
         });
 
         let onBlur = (event) => {
@@ -1462,7 +2047,7 @@
           }
         };
 
-        droplist.show(p.currentSubDropList.showOptions);
+        droplist.show();
 
         droplist.el.focus();
       }
@@ -1516,7 +2101,7 @@
 
             if (itemElement) {
               p.currentSubDropList.showOptions.target = itemElement;
-              p.currentSubDropList.droplist.relayout(p.currentSubDropList.showOptions);
+              p.currentSubDropList.droplist.relayout();
             }
           }
         }
@@ -1527,7 +2112,8 @@
 
         let itemIndex = item._nointeraction ? -1 : this._getItemIndex(item);
 
-        if (itemIndex > -1 && p.items[itemIndex]._nointeraction)
+        const items = p.items;
+        if (itemIndex > -1 && items[itemIndex]._nointeraction)
         itemIndex = -1;
 
         return this.setFocusedItemAtIndex(itemIndex);
@@ -1543,7 +2129,14 @@
         let itemEl = null;
 
         if (itemIndex > -1 && !p.items[itemIndex]._nointeraction) {
-          itemEl = p.virtualListHelper.getItemElementAt(itemIndex);
+          if (p.filteredItems) {
+            const item = p.items[itemIndex];
+            itemIndex = p.filteredItems.indexOf(item);
+          }
+
+          if (itemIndex > -1) {
+            itemEl = p.virtualListHelper.getItemElementAt(itemIndex);
+          }
         }
 
         this._setSingleSelectedItemEl(itemEl);
@@ -1556,7 +2149,8 @@
 
         let itemIndex = item._nointeraction ? -1 : this._getItemIndex(item);
 
-        if (itemIndex > -1 && p.items[itemIndex]._nointeraction)
+        const items = p.items;
+        if (itemIndex > -1 && items[itemIndex]._nointeraction)
         itemIndex = -1;
 
         return this.setSingleSelectedItemAtIndex(itemIndex);
@@ -1576,24 +2170,42 @@
 
       isFirstItem() {
         const p = this._p;
-        return p.focusItemIndex === 0 && p.focusItemIndex < p.items.length;
+        const items = p.filteredItems ?? p.items;
+        return p.focusItemIndex === 0 && p.focusItemIndex < items.length;
       }
 
       isLastItem() {
         const p = this._p;
-        return p.focusItemIndex > -1 && p.focusItemIndex === p.items.length - 1;
+        const items = p.filteredItems ?? p.items;
+        return p.focusItemIndex > -1 && p.focusItemIndex === items.length - 1;
       }
 
       scrollItemIndexIntoView(itemIndex) {
         const p = this._p;
 
+        if (this._hasScroll()) {
+          if (p.filteredItems) {
+            const item = p.items[itemIndex];
+            itemIndex = p.items.indexOf(item);
+          }
+
+          if (itemIndex !== -1) {
+            this._scrollItemIndexIntoView(itemIndex);
+          }
+        }
+
+        return this;
+      }
+
+      _scrollItemIndexIntoView(itemIndex) {
+        const p = this._p;
+
         if (this._hasScroll()) {
           const el = p.el,scrollTop = el.scrollTop;
 
           let itemPos,previousPos = -1;
           let maxIterations = 30; // Some zoom/scroll issues can make it so that it takes almost forever
 
-
           while (maxIterations-- > 0) {
             itemPos = p.virtualListHelper.getItemPosition(itemIndex);
 
@@ -1616,8 +2228,6 @@
             p.virtualListHelper.render();
           }
         }
-
-        return this;
       }
 
       /**
@@ -1678,7 +2288,8 @@
         let itemIndex = -1;
 
         if (item) {
-          itemIndex = p.items.indexOf(item);
+          const items = p.filteredItems ?? p.items;
+          itemIndex = items.indexOf(item);
           if (itemIndex === -1) {
             let value = item && item.value !== undefined ? item.value : item;
             let label = item && item.label ? item.label : value;
@@ -1826,12 +2437,25 @@
 
         p.sink.
         add(p.el, 'focus', (event) => {
+          if (event.target === this.el && p.searchable)
+          p.searchInput.focus();
+
+          if (event.relatedTarget &&
+          this.elContains(event.relatedTarget, true) &&
+          this.elContains(event.target, true))
+          return;
+
           let itemEl = p.focusItemEl || // focused item
           p.el.firstChild; // or the first item
 
           this._focus(event, itemEl, null, false);
-        }).
+        }, true).
         add(p.el, 'blur', (event) => {
+          if (event.relatedTarget &&
+          this.elContains(event.relatedTarget, true) &&
+          this.elContains(event.target, true))
+          return;
+
           setTimeout(() => {
             if (this[DestroyedSymbol$1]) return;
 
@@ -1842,7 +2466,7 @@
             this._delayBlurItemOnBlur();
             this._trigger('blur', event);
           });
-        });
+        }, true);
       }
 
       _hookKeyEvents() {
@@ -1851,6 +2475,21 @@
         p.sink.add(p.el, 'keydown', (evt) => this._keydown(evt));
       }
 
+      _hookSearchEvents() {
+        const p = this._p;
+
+        if (!p.searchInput)
+        return;
+
+        p.sink.add(p.searchInput, 'input', () => {
+          p.filterTerm = p.searchInput.value.trim();
+          p.filteredItems = null;
+
+          this._trigger('search', { value: p.searchInput.value });
+          p.throttledRefilterItems();
+        });
+      }
+
       _keydown(event) {
         const p = this._p;
 
@@ -1895,7 +2534,8 @@
           case keycodeJs.VALUE_RIGHT:
             if (event.key === keycodeJs.VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
             event.key === keycodeJs.VALUE_LEFT && getComputedStyle(event.target).direction === 'rtl') {
-              let item = p.items[p.focusItemIndex];
+              const items = p.filteredItems ?? p.items;
+              let item = items[p.focusItemIndex];
               if (p.focusItemIndex > -1 && item._subitems)
               this._showSublist(item, p.focusItemEl);
             } else {
@@ -1925,7 +2565,11 @@
 
           default:{
               if (event.type === 'keydown') return;
+
+              // Inline search box not available, then support typing to focus by first letters
+              if (!p.searchable)
               this._keydownFreeType(event);
+
               preventDefault = false;
             }
         }
@@ -1950,12 +2594,14 @@
 
         let focusItemIndex = p.focusItemIndex;
 
+        const items = p.filteredItems ?? p.items;
+
         // These are all the possible matches for the text typed in so far
-        for (let i = 0, count = p.items.length; i < count; i++) {
+        for (let i = 0, count = items.length; i < count; i++) {
           if (matchIndex !== -1 && i < focusItemIndex)
           continue; // We are only interested in first match + match after the focused item
 
-          item = p.items[i];
+          item = items[i];
           if (regex.test(item.label)) {
             matchIndex = i;
             if (focusItemIndex === -1 || i >= focusItemIndex)
@@ -1969,11 +2615,11 @@
           keyword = character;
           regex = new RegExp(`^${escapeRegex(keyword)}`, 'i');
 
-          for (let i = 0, count = p.items.length; i < count; i++) {
+          for (let i = 0, count = items.length; i < count; i++) {
             if (matchIndex !== -1 && i < focusItemIndex)
             continue; // We are only interested in first match + match after the focused item
 
-            item = p.items[i];
+            item = items[i];
             if (regex.test(item.label)) {
               matchIndex = i;
               if (focusItemIndex === -1 || i >= focusItemIndex)
@@ -1987,7 +2633,7 @@
           this._focus(evt, next || null, matchIndex, true);
 
           if (!this.isVisible()) {
-            this.triggerItemSelection(next ? null : p.items[matchIndex], evt);
+            this.triggerItemSelection(next ? null : items[matchIndex], evt);
           }
 
           // Record the last filter used
@@ -2014,6 +2660,10 @@
           itemIndex = p.virtualListHelper.getItemIndexFromElement(itemEl);
         }
 
+        if (itemIndex > -1 && itemEl?.[ItemSymbol$1]?.[ItemSymbol$1] === NoResultsItemSymbol) {
+          itemIndex = undefined;
+        }
+
         if (itemIndex > -1) {
           this.scrollItemIndexIntoView(itemIndex);
         } else if (itemIndex === undefined) {
@@ -2039,7 +2689,8 @@
         p.focusItemEl = focusItemEl;
         p.focusItemIndex = itemIndex;
 
-        const item = p.items[itemIndex];
+        const items = p.filteredItems ?? p.items;
+        const item = items[itemIndex];
         this._trigger('itemfocus', {
           value: item.value,
           item: item[ItemSymbol$1] ?? item,
@@ -2074,12 +2725,13 @@
         const p = this._p;
 
         let next,nextIndex,directionUp = false;
+        const items = p.filteredItems ?? p.items;
 
         if (direction === 'first') {
           nextIndex = 0;
           directionUp = false;
         } else if (direction === 'last') {
-          nextIndex = p.items.length - 1;
+          nextIndex = items.length - 1;
           directionUp = true;
         } else if (direction === 'prev') {
           if (!this.hasFocusedItem())
@@ -2087,7 +2739,7 @@
 
           nextIndex = p.focusItemIndex - 1;
           if (nextIndex === -1) {
-            nextIndex = p.items.length - 1;
+            nextIndex = items.length - 1;
           }
 
           directionUp = true;
@@ -2096,7 +2748,7 @@
           return this._move('first', event);
 
           nextIndex = p.focusItemIndex + 1;
-          if (nextIndex === p.items.length) {
+          if (nextIndex === items.length) {
             nextIndex = 0;
           }
 
@@ -2125,8 +2777,8 @@
 
               if (nextIndex < 0) {
                 nextIndex = 0;
-              } else if (nextIndex >= p.items.length) {
-                nextIndex = p.items.length;
+              } else if (nextIndex >= items.length) {
+                nextIndex = items.length;
               }
             } else if (p.focusItemEl) {
               let base = Css.getElementOffset(p.focusItemEl).top;
@@ -2163,13 +2815,13 @@
           return;
         }
 
-        let itemCount = p.items.length;
+        let itemCount = items.length;
 
         if (nextIndex >= itemCount) {
           return;
         }
 
-        let item = p.items[nextIndex];
+        let item = items[nextIndex];
         // noinspection UnnecessaryLocalVariableJS
         let startedAtIndex = nextIndex;
 
@@ -2186,7 +2838,7 @@
             }
           }
 
-          item = p.items[nextIndex];
+          item = items[nextIndex];
 
           if (nextIndex === startedAtIndex) {
             break;
@@ -2202,7 +2854,9 @@
       }
 
       _hasScroll() {
-        return this.el.clientHeight < this.el.scrollHeight;
+        const p = this._p;
+        const menuEl = p.menuEl;
+        return menuEl.clientHeight < menuEl.scrollHeight;
       }
 
       _updateGroupStateForItem(item) {
@@ -2217,7 +2871,7 @@
           let affectedItems = 0;
 
           if (p.autoCheckGroupChildren) {
-            let items = p.items;
+            let items = p.filteredItems ?? p.items;
             let groupIndex = items.indexOf(item);
 
             for (let i = groupIndex + 1, len = items.length; i < len; i++) {
@@ -2260,7 +2914,7 @@
             affectedItems: affectedItems
           });
         } else if (p.groupCount > 0 && p.autoCheckGroupChildren) {
-          let items = p.items;
+          let items = p.filteredItems ?? p.items;
           let itemIndex = items.indexOf(item);
           let groupIndex = -1;
 
@@ -2286,7 +2940,7 @@
         if (!(p.multi && p.autoCheckGroupChildren && groupIndex > -1))
         return this;
 
-        let items = p.items;
+        let items = p.filteredItems ?? p.items;
         let groupItem = items[groupIndex];
 
         if (!groupItem || !groupItem._group) return this;
@@ -2412,7 +3066,7 @@
       _determineVirtualMode(targetItemCount) {
         const p = this._p;
 
-        let items = p.items;
+        let items = p.filteredItems ?? p.items;
         if (targetItemCount === undefined) {
           targetItemCount = items.length;
         }
@@ -2432,7 +3086,21 @@
         // NOTE: a "measure" item will not have full data of original item.
         //      so for a custom renderer - we try to send original item, and fallback to our private list item.
 
-        if (!p.renderItem || p.renderItem(item[ItemSymbol$1] || item, itemEl) === false) {
+        const originalItem = item[ItemSymbol$1];
+
+        if (originalItem === NoResultsItemSymbol) {
+          if (p.renderNoResultsItem && p.renderNoResultsItem(item, itemEl) !== false) {
+            return true;
+          }
+
+          itemEl.appendChild(Dom.createElement('div', {
+            class: 'droplist-no-results-content',
+            textContent: p.noResultsText
+          }));
+          return;
+        }
+
+        if (!p.renderItem || p.renderItem(originalItem || item, itemEl) === false) {
           itemEl.appendChild(Dom.createElement('span', {
             class: `${p.baseClassName}__item_label`,
             textContent: item.label
@@ -2474,7 +3142,7 @@
         }
 
         let autoWidth = 0;
-        if (!p.useExactTargetWidth) {
+        if (!p.useExactTargetWidth || !targetWidth) {
           if (p.estimateWidth || p.virtualListHelper.isVirtual()) {
             autoWidth = p.lastMeasureItemWidth;
           } else {
@@ -2501,56 +3169,8 @@
       }
     }
 
-    const throttle = (func, wait, options) => {
-      let timeout, context, args, result;
-      let previous = 0;
-      if (!options) options = {};
-
-      const later = () => {
-        previous = options.leading === false ? 0 : Date.now();
-        timeout = null;
-        result = func.apply(context, args);
-        if (!timeout) context = args = null;
-      };
-
-      const throttled = function () {
-        const now = Date.now();
-        if (!previous && options.leading === false)
-        previous = now;
-
-        const remaining = wait - (now - previous);
-        context = this;
-        args = arguments;
-        if (remaining <= 0 || remaining > wait) {
-          if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
-          }
-          previous = now;
-          result = func.apply(context, args);
-          if (!timeout) context = args = null;
-        } else if (!timeout && options.trailing !== false) {
-          timeout = setTimeout(later, remaining);
-        }
-        return result;
-      };
-
-      throttled.cancel = () => {
-        clearTimeout(timeout);
-        previous = 0;
-        timeout = context = args = null;
-      };
-
-      throttled.isScheduled = () => {
-        return !!timeout;
-      };
-
-      return throttled;
-    };
-
     const ItemSymbol = Symbol('item');
     const DestroyedSymbol = Symbol('destroyed');
-    const NoResultsItemSymbol = Symbol('no_results_items');
     const RestMultiItemsSymbol = Symbol('rest_multi_items');
 
     const hasTouchCapability = !!('ontouchstart' in window ||
@@ -2608,10 +3228,6 @@
      * @property {boolean} [showSelection=true] show selection? if false, the placeholder will take effect
      * @property {boolean} [showPlaceholderInTooltip=false] show placeholder in title attribute
      * @property {function(items: DropList.ItemBase[]):string} [multiPlaceholderFormatter] formatter for placeholder for multi items mode
-     * @property {boolean} [searchable=false] is it searchable?
-     * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
-     * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
-     * @property {boolean} [filterOnEmptyTerm=false] call the filter function on empty search term too
      * @property {string} [labelProp='label']
      * @property {string} [valueProp='value']
      * @property {string} [multiItemLabelProp='short_label']
@@ -2628,6 +3244,10 @@
      * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderRestMultiItem]
      * @property {function(item: DropList.ItemBase, itemEl: Element):(*|false)} [renderNoResultsItem]
      * @property {function(item: DropList.ItemBase, itemEl: Element)} [unrenderNoResultsItem]
+     * @property {boolean} [searchable=false] is it searchable?
+     * @property {string} [noResultsText='No matching results'] text for no results (empty for none)
+     * @property {number} [filterThrottleWindow=300] throttle time (milliseconds) for filtering
+     * @property {boolean} [filterOnEmptyTerm=false] call the filter function on empty search term too
      * @property {function(items: DropList.ItemBase[], term: string):(DropList.ItemBase[]|null)} [filterFn]
      * @property {function(name: string, ...args)} [on]
      * @property {boolean} [isLoadingMode]
@@ -2746,8 +3366,6 @@
           multiPlaceholderFormatter: o.multiPlaceholderFormatter,
           searchable: o.searchable,
           noResultsText: o.noResultsText,
-          filterThrottleWindow: o.filterThrottleWindow,
-          filterOnEmptyTerm: o.filterOnEmptyTerm,
 
           labelProp: o.labelProp,
           valueProp: o.valueProp,
@@ -2764,7 +3382,6 @@
           unrenderRestMultiItem: o.unrenderRestMultiItem,
           renderNoResultsItem: o.renderNoResultsItem,
           unrenderNoResultsItem: o.unrenderNoResultsItem,
-          filterFn: o.filterFn,
           on: o.on || null,
           silenceEvents: true,
           mitt: mitt(),
@@ -2772,8 +3389,6 @@
           isLoadingMode: !!o.isLoadingMode,
 
           items: [],
-          filteredItems: null,
-          currentItemsView: [], // contains the final version of items sent to DropList
           itemsChanged: true,
 
           sink: new DomEventsSink(),
@@ -2786,10 +3401,9 @@
           selectionChanged: true,
           resortBySelectionNeeded: false,
 
-          throttledUpdateListItems: throttle(() => this._updateListItems(),
-          o.filterThrottleWindow,
-          { leading: true, trailing: true }),
-
+          filterThrottleWindow: o.filterThrottleWindow,
+          filterOnEmptyTerm: o.filterOnEmptyTerm,
+          filterFn: null,
           filterTerm: ''
         };
 
@@ -2901,6 +3515,9 @@
           p.resizeObserver.observe(p.el);
         }
 
+        if (o.filterFn)
+        this.setFilterFn(o.filterFn);
+
         this.setItems(o.items);
         delete o.items; // we do not need this in memory anymore
 
@@ -2934,9 +3551,6 @@
         p.sink.remove();
         p.dropList && p.dropList.destroy();
 
-        if (p.throttledUpdateListItems)
-        p.throttledUpdateListItems.cancel();
-
         this._cleanupSingleWrapper();
 
         if (p.unrenderMultiItem || p.unrenderRestMultiItem) {
@@ -3065,7 +3679,6 @@
         items = [];
 
         p.items = items.slice(0);
-        p.filteredItems = null;
         p.itemsChanged = true;
 
         this._updateItemByValueMap();
@@ -3082,8 +3695,8 @@
       getFilteredItemCount() {
         const p = this._p;
 
-        if (p.filteredItems)
-        return p.filteredItems.length;
+        if (p.dropList)
+        return p.dropList.getFilteredItemCount();
 
         if (p.items)
         return p.items.length;
@@ -3093,9 +3706,7 @@
 
       isFilterPending() {
         const p = this._p;
-
-        return !!(p.throttledUpdateListItems.isScheduled() ||
-        !p.filteredItems && (p.filterTerm || p.filterOnEmptyTerm && p.filterFn));
+        return p.dropList?.isFilterPending() === true;
       }
 
       updateItemByValue(value, newItem) {
@@ -3195,11 +3806,7 @@
 
         if (performSearch) {
           p.filterTerm = p.input.value.trim();
-          p.filteredItems = null;
-          p.itemsChanged = true;
-
-          this._trigger('search', { value: p.input.value });
-          p.throttledUpdateListItems();
+          p.dropList?.setSearchTerm(p.filterTerm, performSearch);
         }
 
         return this;
@@ -3217,11 +3824,7 @@
 
       invokeRefilter() {
         const p = this._p;
-        if (!p.filterTerm && !p.filterOnEmptyTerm && !p.filteredItems)
-        return this;
-        p.filteredItems = null;
-        p.itemsChanged = true;
-        p.throttledUpdateListItems();
+        p.dropList?.invokeRefilter();
         return this;
       }
 
@@ -3258,7 +3861,6 @@
         return this;
 
         p.sortListItems = sortListItems;
-        p.filteredItems = null;
         p.itemsChanged = true;
         this._scheduleSync('render_list');
         return this;
@@ -3347,6 +3949,8 @@
         return this;
 
         p.treatGroupSelectionAsItems = treatGroupSelectionAsItems;
+        p.dropList?.setFilterGroups(treatGroupSelectionAsItems);
+        p.dropList?.setFilterEmptyGroups(!treatGroupSelectionAsItems);
         p.itemsChanged = true;
         this._scheduleSync('render_list');
         return this;
@@ -3526,8 +4130,7 @@
        * @returns {SelectBox}
        */
       setNoResultsText(noResultsText) {
-        this._p.noResultsText = noResultsText;
-        this._scheduleSync('render_list');
+        this._p.dropList?.setNoResultsText(noResultsText);
         return this;
       }
 
@@ -3545,17 +4148,7 @@
       setFilterThrottleWindow(window) {
         const p = this._p;
         p.filterThrottleWindow = window;
-
-        let isScheduled = p.throttledUpdateListItems ? p.throttledUpdateListItems.isScheduled() : false;
-
-        if (p.throttledUpdateListItems)
-        p.throttledUpdateListItems.cancel();
-
-        p.throttledUpdateListItems = throttle(() => this._updateListItems(), p.filterThrottleWindow, true);
-
-        if (isScheduled)
-        p.throttledUpdateListItems();
-
+        p.dropList?.setFilterThrottleWindow(window);
         return this;
       }
 
@@ -3574,8 +4167,7 @@
         const p = this._p;
         if (p.filterOnEmptyTerm === value)
         return this;
-        p.filterOnEmptyTerm = value;
-        p.throttledUpdateListItems();
+        p.dropList?.setFilterOnEmptyTerm(value);
         return this;
       }
 
@@ -3717,8 +4309,21 @@
         const p = this._p;
         if (p.filterFn === fn)
         return this;
+        if (!fn) {
+          // Add search by multi-item label
+          fn = (items, term) => {
+            const matcher = new RegExp(escapeRegex(term), 'i');
+            const labelProp = p.labelProp,
+              multiItemLabelProp = p.multiItemLabelProp;
+
+            return p.items.filter((x) => {
+              if (!p.treatGroupSelectionAsItems && x._group) return true;
+              return matcher.test(x[labelProp] || x[multiItemLabelProp]);
+            });
+          };
+        }
         p.filterFn = fn;
-        p.throttledUpdateListItems();
+        p.dropList?.setFilterFn(fn);
         return this;
       }
 
@@ -3898,7 +4503,7 @@
         // Propagate direction to droplist
         p.dropList.setDirection(getComputedStyle(p.el).direction);
 
-        p.dropList.show(this._getDropListPositionOptions());
+        p.dropList.show();
         this._repositionDropList();
 
         // Another one in case the droplist position messed with screen layout.
@@ -4291,31 +4896,14 @@
         const customUnrenderItem = (p.listOptions || {}).unrenderItem;
 
         const renderItem = renderNoResultsItem || customRenderItem ? (item, itemEl) => {
-          if (item && item[valueProp] === NoResultsItemSymbol) {
-            if (renderNoResultsItem && renderNoResultsItem(item, itemEl) !== false) {
-              return true;
-            }
-
-            itemEl.appendChild(Dom.createElement('div', {
-              class: 'droplist-no-results-content',
-              textContent: p.noResultsText
-            }));
-            return true;
-          } else {
-            if (customRenderItem)
-            return customRenderItem(item, itemEl);
-          }
+          if (customRenderItem)
+          return customRenderItem(item, itemEl);
           return false;
         } : null;
 
         const unrenderItem = unrenderNoResultsItem || customRenderItem ? (item, itemEl) => {
-          if (item && item[valueProp] === NoResultsItemSymbol) {
-            if (unrenderNoResultsItem)
-            return unrenderNoResultsItem(item, itemEl);
-          } else {
-            if (customUnrenderItem)
-            return customUnrenderItem(item, itemEl);
-          }
+          if (customUnrenderItem)
+          return customUnrenderItem(item, itemEl);
           return false;
         } : null;
 
@@ -4333,6 +4921,16 @@
           labelProp: p.labelProp,
           valueProp: p.valueProp,
 
+          searchable: false,
+          noResultsText: p.noResultsText,
+          filterThrottleWindow: p.filterThrottleWindow,
+          filterOnEmptyTerm: p.filterOnEmptyTerm,
+          filterGroups: p.treatGroupSelectionAsItems,
+          filterEmptyGroups: p.treatGroupSelectionAsItems,
+          filterFn: p.filterFn,
+
+          positionOptionsProvider: () => this._getDropListPositionOptions(),
+
           on: (name, event) => {
             switch (name) {
               case 'show:before':{
@@ -4487,6 +5085,15 @@
 
               case 'blur':
                 this._handleOnBlur();
+                break;
+
+              case 'search':
+                this._trigger('search', event);
+                break;
+
+              case 'itemschanged':
+                this._trigger('itemschanged', event);
+                break;
             }
           }
         });
@@ -4517,8 +5124,7 @@
           p.dropList && this.droplistElContains(document.activeElement, true))) {
             return;
           }
-          if (p.throttledUpdateListItems)
-          p.throttledUpdateListItems.cancel();
+
           this.closeList();
         });
       }
@@ -4665,12 +5271,9 @@
             if (p.disabled) return;
 
             p.filterTerm = p.input.value.trim();
-            p.filteredItems = null;
-            p.itemsChanged = true;
+            p.dropList?.setSearchTerm(p.filterTerm, true);
 
             this._trigger('search', { value: p.input.value });
-
-            p.throttledUpdateListItems();
           }).
           add(p.input, 'click.dropdown', () => {
             if (p.disabled) return;
@@ -4775,15 +5378,16 @@
         if (this.isMultiEnabled()) return;
 
         let selectedItems = this.getSelectedItems();
-        let items = p.filteredItems ?? p.items;
-        if (p.currentItemsView && p.currentItemsView.length === items.length)
-        items = p.currentItemsView;
-        if (items.length + (p.clearable ? 1 : 0) > 1) {
-          let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) - 1 : items.length - 1;
+        let finalItemCount = p.dropList.getFilteredItemCount();
+
+        if (finalItemCount + (p.clearable ? 1 : 0) > 1) {
+          let nextIndex = selectedItems.length > 0 ?
+          p.dropList.filteredItemIndexByItem(selectedItems[0]) - 1 :
+          finalItemCount - 1;
           if (nextIndex === -1 && !p.clearable)
-          nextIndex = items.length - 1;
+          nextIndex = finalItemCount - 1;
 
-          let item = nextIndex === -1 ? null : items[nextIndex];
+          let item = nextIndex === -1 ? null : p.dropList.filteredItemAtIndex(nextIndex);
           if (item) {
             this._performSelectWithEvent(item, item[p.valueProp]);
           } else {
@@ -4798,15 +5402,16 @@
         if (this.isMultiEnabled()) return;
 
         let selectedItems = this.getSelectedItems();
-        let items = p.filteredItems ?? p.items;
-        if (p.currentItemsView && p.currentItemsView.length === items.length)
-        items = p.currentItemsView;
-        if (items.length + (p.clearable ? 1 : 0) > 1) {
-          let nextIndex = selectedItems.length > 0 ? items.indexOf(selectedItems[0]) + 1 : 0;
-          if (nextIndex === items.length)
+        let finalItemCount = p.dropList.getFilteredItemCount();
+
+        if (finalItemCount + (p.clearable ? 1 : 0) > 1) {
+          let nextIndex = selectedItems.length > 0 ?
+          p.dropList.filteredItemIndexByItem(selectedItems[0]) + 1 :
+          0;
+          if (nextIndex === finalItemCount)
           nextIndex = p.clearable ? -1 : 0;
 
-          let item = nextIndex === -1 ? null : items[nextIndex];
+          let item = nextIndex === -1 ? null : p.dropList.filteredItemAtIndex(nextIndex);
           if (item) {
             this._performSelectWithEvent(item, item[p.valueProp]);
           } else {
@@ -4823,37 +5428,19 @@
         if (!dropList || !p.dropListVisible)
         return;
 
-        // For every search change, filteredItems is cleared.
-        // If it's non-null here, then it means we have an extra call to _updateListItems, and not need to refilter.
-        if (!p.filteredItems && (p.filterTerm || p.filterOnEmptyTerm && p.filterFn)) {
-          this._refilterItems();
-        }
-
         if (p.itemsChanged || p.selectionChanged) {
           p.dropList._lastSerializedBox = null;
         }
 
         if (p.itemsChanged) {
-          let items = p.filteredItems || p.items;
+          let items = p.items;
           if (p.sortListItems || p.sortListCheckedFirst && p.multi) {
             items = this._sortItems(items,
             p.sortListItems,
             p.sortListCheckedFirst && p.multi,
             p.splitListCheckedGroups);
           }
-          dropList.removeAllItems();
-
-          if (items.length === 0 && p.noResultsText) {
-            items = [{
-              [p.labelProp]: p.noResultsText,
-              [p.valueProp]: NoResultsItemSymbol,
-              _nointeraction: true,
-              _nocheck: true
-            }];
-          }
-
-          dropList.addItems(items);
-          p.currentItemsView = items;
+          dropList.setItems(items);
           p.itemsChanged = false;
           p.selectionChanged = true;
           p.resortBySelectionNeeded = false;
@@ -4883,77 +5470,6 @@
         }
       }
 
-      /** @private */
-      _refilterItems() {
-        const p = this._p;
-
-        const term = p.filterTerm;
-        const treatGroupSelectionAsItems = p.treatGroupSelectionAsItems;
-
-        if (term || p.filterOnEmptyTerm && p.filterFn) {
-          let fn = p.filterFn;
-
-          let filteredItems;
-
-          if (typeof fn === 'function') {
-            filteredItems = p.filterFn(p.items, term);
-          }
-
-          // If there was no filter function, or it gave up on filtering.
-          if (!Array.isArray(filteredItems)) {
-            if (term) {
-              const matcher = new RegExp(escapeRegex(term), 'i');
-              const labelProp = p.labelProp,
-                multiItemLabelProp = p.multiItemLabelProp;
-
-              filteredItems = p.items.filter((x) => {
-                if (!treatGroupSelectionAsItems && x._group) return true;
-                return matcher.test(x[labelProp] || x[multiItemLabelProp]);
-              });
-            } else {
-              filteredItems = null;
-            }
-          }
-
-          p.filteredItems = filteredItems;
-
-          if (filteredItems && !treatGroupSelectionAsItems) {
-            // Clean up groups without children
-
-            let lastGroup = -1;
-            let len = filteredItems.length;
-
-            for (let i = 0; i < len; i++) {
-              let item = filteredItems[i];
-
-              if (item._group) {
-                if (lastGroup !== -1 && lastGroup === i - 1) {
-                  // It was an empty group
-                  filteredItems.splice(lastGroup, 1);
-                  i--;
-                  len--;
-                }
-
-                lastGroup = i;
-              }
-            }
-
-            if (lastGroup !== -1) {
-              if (lastGroup === len - 1) {
-                // It was an empty group
-                filteredItems.splice(lastGroup, 1);
-              }
-            }
-          }
-        } else {
-          p.filteredItems = null;
-        }
-
-        this._trigger('itemschanged', { term: term, mutated: false, count: this.getFilteredItemCount() });
-
-        p.itemsChanged = true;
-      }
-
       /** @private */
       _setSelectedItems(items) {
         const p = this._p,valueProp = p.valueProp;
@@ -5592,8 +6108,7 @@
         p.input.value = value == null ? '' : String(value);
 
         p.filterTerm = '';
-        p.filteredItems = null;
-        p.itemsChanged = true;
+        p.dropList?.setSearchTerm('', true);
       }
 
       /**
@@ -5714,7 +6229,7 @@
         const serialized = box.left + ',' + box.top + ',' + box.right + ',' + box.bottom;
 
         if (p.dropList._lastSerializedBox !== serialized) {
-          p.dropList.relayout(this._getDropListPositionOptions());
+          p.dropList.relayout();
           p.dropList._lastSerializedBox = serialized;
         }