@danielgindi/selectbox 1.0.147 → 2.0.0

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.147
+ * @danielgindi/selectbox 2.0.0
  * git://github.com/danielgindi/selectbox.git
  */
 'use strict';
@@ -14,9 +14,57 @@ var mitt = require('mitt');
 
 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;
 
@@ -42,7 +90,17 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * @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]
  * */
 /** */
 
@@ -105,7 +163,14 @@ let defaultOptions$1 = {
   labelProp: 'label',
   valueProp: 'value',
 
-  on: null
+  on: null,
+
+  searchable: false,
+  noResultsText: 'No matching results',
+  filterThrottleWindow: 300,
+  filterOnEmptyTerm: false,
+  filterGroups: false,
+  filterEmptyGroups: false
 };
 
 /*
@@ -166,17 +231,35 @@ class DropList {
       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));
@@ -187,31 +270,54 @@ class DropList {
       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,
@@ -238,7 +344,19 @@ class DropList {
           };
           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) {
@@ -284,36 +402,20 @@ class DropList {
       }
     });
 
-    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;
   }
@@ -331,7 +433,7 @@ class DropList {
     p.sink.remove();
     p.virtualListHelper.destroy();
 
-    if (p.el) {
+    if (p.el?.parentNode) {
       DomCompat.remove(p.el);
     }
 
@@ -340,13 +442,15 @@ class DropList {
       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] = '';
       }
@@ -361,6 +465,8 @@ class DropList {
       delete p.lastPositionTarget;
     }
 
+    delete p.lastPositionOptions;
+
     this._p = null;
   }
 
@@ -444,16 +550,47 @@ class DropList {
    */
   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];
 
@@ -488,7 +625,8 @@ class DropList {
     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);
@@ -515,7 +653,8 @@ class DropList {
       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) {
@@ -666,9 +805,24 @@ class DropList {
       }
     }
 
-    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;
   }
@@ -682,9 +836,11 @@ class DropList {
     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();
@@ -735,9 +891,18 @@ class DropList {
     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();
     }
 
@@ -756,9 +921,27 @@ class DropList {
       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;
   }
@@ -767,10 +950,13 @@ class DropList {
     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;
@@ -806,8 +992,23 @@ class DropList {
   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;
       }
@@ -819,8 +1020,23 @@ class DropList {
   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;
       }
@@ -829,6 +1045,36 @@ class DropList {
     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]);
   }
@@ -845,19 +1091,320 @@ class DropList {
     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);
@@ -920,18 +1467,25 @@ class DropList {
     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;
     }
 
@@ -1066,6 +1620,11 @@ class DropList {
     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();
 
@@ -1203,7 +1762,7 @@ class DropList {
 
   /**
    *
-   * @param {DropList.PositionOptions?} positionOptions
+   * @param {DropList.PositionOptions?} [positionOptions]
    * @returns {DropList}
    * @public
    */
@@ -1230,6 +1789,10 @@ class DropList {
       }
     });
 
+    if (p.needsRefilter) {
+      this._refilterItems();
+    }
+
     const el = p.el;
     el.style.position = 'absolute';
     el.classList.remove(`${p.baseClassName}__is-hiding`);
@@ -1241,6 +1804,14 @@ class DropList {
     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);
 
@@ -1287,6 +1858,11 @@ class DropList {
 
       p.hiding = true;
 
+      if (this.isFilterPending()) {
+        p.throttledRefilterItems.cancel();
+        p.needsRefilter = true;
+      }
+
       if (el) {
 
         el.classList.add(`${p.baseClassName}__is-hiding`);
@@ -1307,6 +1883,7 @@ class DropList {
             }
           });
         } else {
+          if (el.parentNode)
           DomCompat.remove(el);
           el.classList.remove(`${p.baseClassName}__is-hiding`);
         }
@@ -1356,15 +1933,22 @@ class DropList {
   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;
 
@@ -1418,7 +2002,8 @@ class DropList {
       labelProp: p.labelProp,
       valueProp: p.valueProp,
       renderItem: p.renderItem,
-      unrenderItem: p.unrenderItem
+      unrenderItem: p.unrenderItem,
+      positionOptionsProvider: () => p.currentSubDropList.showOptions
     });
 
     let onBlur = (event) => {
@@ -1466,7 +2051,7 @@ class DropList {
       }
     };
 
-    droplist.show(p.currentSubDropList.showOptions);
+    droplist.show();
 
     droplist.el.focus();
   }
@@ -1520,7 +2105,7 @@ class DropList {
 
         if (itemElement) {
           p.currentSubDropList.showOptions.target = itemElement;
-          p.currentSubDropList.droplist.relayout(p.currentSubDropList.showOptions);
+          p.currentSubDropList.droplist.relayout();
         }
       }
     }
@@ -1531,7 +2116,8 @@ class DropList {
 
     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);
@@ -1547,7 +2133,14 @@ class DropList {
     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);
@@ -1560,7 +2153,8 @@ class DropList {
 
     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);
@@ -1580,24 +2174,42 @@ class DropList {
 
   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);
 
@@ -1620,8 +2232,6 @@ class DropList {
         p.virtualListHelper.render();
       }
     }
-
-    return this;
   }
 
   /**
@@ -1682,7 +2292,8 @@ class DropList {
     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;
@@ -1830,12 +2441,25 @@ class DropList {
 
     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;
 
@@ -1846,7 +2470,7 @@ class DropList {
         this._delayBlurItemOnBlur();
         this._trigger('blur', event);
       });
-    });
+    }, true);
   }
 
   _hookKeyEvents() {
@@ -1855,6 +2479,21 @@ class DropList {
     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;
 
@@ -1899,7 +2538,8 @@ class DropList {
       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 {
@@ -1929,7 +2569,11 @@ class DropList {
 
       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;
         }
     }
@@ -1954,12 +2598,14 @@ class DropList {
 
     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)
@@ -1973,11 +2619,11 @@ class DropList {
       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)
@@ -1991,7 +2637,7 @@ class DropList {
       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
@@ -2018,6 +2664,10 @@ class DropList {
       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) {
@@ -2043,7 +2693,8 @@ class DropList {
     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,
@@ -2078,12 +2729,13 @@ class DropList {
     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())
@@ -2091,7 +2743,7 @@ class DropList {
 
       nextIndex = p.focusItemIndex - 1;
       if (nextIndex === -1) {
-        nextIndex = p.items.length - 1;
+        nextIndex = items.length - 1;
       }
 
       directionUp = true;
@@ -2100,7 +2752,7 @@ class DropList {
       return this._move('first', event);
 
       nextIndex = p.focusItemIndex + 1;
-      if (nextIndex === p.items.length) {
+      if (nextIndex === items.length) {
         nextIndex = 0;
       }
 
@@ -2129,8 +2781,8 @@ class DropList {
 
           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;
@@ -2167,13 +2819,13 @@ class DropList {
       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;
 
@@ -2190,7 +2842,7 @@ class DropList {
         }
       }
 
-      item = p.items[nextIndex];
+      item = items[nextIndex];
 
       if (nextIndex === startedAtIndex) {
         break;
@@ -2206,7 +2858,9 @@ class DropList {
   }
 
   _hasScroll() {
-    return this.el.clientHeight < this.el.scrollHeight;
+    const p = this._p;
+    const menuEl = p.menuEl;
+    return menuEl.clientHeight < menuEl.scrollHeight;
   }
 
   _updateGroupStateForItem(item) {
@@ -2221,7 +2875,7 @@ class DropList {
       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++) {
@@ -2264,7 +2918,7 @@ class DropList {
         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;
 
@@ -2290,7 +2944,7 @@ class DropList {
     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;
@@ -2416,7 +3070,7 @@ class DropList {
   _determineVirtualMode(targetItemCount) {
     const p = this._p;
 
-    let items = p.items;
+    let items = p.filteredItems ?? p.items;
     if (targetItemCount === undefined) {
       targetItemCount = items.length;
     }
@@ -2436,7 +3090,21 @@ class DropList {
     // 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
@@ -2478,7 +3146,7 @@ class DropList {
     }
 
     let autoWidth = 0;
-    if (!p.useExactTargetWidth) {
+    if (!p.useExactTargetWidth || !targetWidth) {
       if (p.estimateWidth || p.virtualListHelper.isVirtual()) {
         autoWidth = p.lastMeasureItemWidth;
       } else {
@@ -2505,56 +3173,8 @@ class DropList {
   }
 }
 
-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 ||
@@ -2612,10 +3232,6 @@ const inputBackbufferCssProps = [
  * @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']
@@ -2632,6 +3248,10 @@ const inputBackbufferCssProps = [
  * @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]
@@ -2750,8 +3370,6 @@ class SelectBox {
       multiPlaceholderFormatter: o.multiPlaceholderFormatter,
       searchable: o.searchable,
       noResultsText: o.noResultsText,
-      filterThrottleWindow: o.filterThrottleWindow,
-      filterOnEmptyTerm: o.filterOnEmptyTerm,
 
       labelProp: o.labelProp,
       valueProp: o.valueProp,
@@ -2768,7 +3386,6 @@ class SelectBox {
       unrenderRestMultiItem: o.unrenderRestMultiItem,
       renderNoResultsItem: o.renderNoResultsItem,
       unrenderNoResultsItem: o.unrenderNoResultsItem,
-      filterFn: o.filterFn,
       on: o.on || null,
       silenceEvents: true,
       mitt: mitt(),
@@ -2776,8 +3393,6 @@ class SelectBox {
       isLoadingMode: !!o.isLoadingMode,
 
       items: [],
-      filteredItems: null,
-      currentItemsView: [], // contains the final version of items sent to DropList
       itemsChanged: true,
 
       sink: new DomEventsSink(),
@@ -2790,10 +3405,9 @@ class SelectBox {
       selectionChanged: true,
       resortBySelectionNeeded: false,
 
-      throttledUpdateListItems: throttle(() => this._updateListItems(),
-      o.filterThrottleWindow,
-      { leading: true, trailing: true }),
-
+      filterThrottleWindow: o.filterThrottleWindow,
+      filterOnEmptyTerm: o.filterOnEmptyTerm,
+      filterFn: null,
       filterTerm: ''
     };
 
@@ -2905,6 +3519,9 @@ class SelectBox {
       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
 
@@ -2938,9 +3555,6 @@ class SelectBox {
     p.sink.remove();
     p.dropList && p.dropList.destroy();
 
-    if (p.throttledUpdateListItems)
-    p.throttledUpdateListItems.cancel();
-
     this._cleanupSingleWrapper();
 
     if (p.unrenderMultiItem || p.unrenderRestMultiItem) {
@@ -3069,7 +3683,6 @@ class SelectBox {
     items = [];
 
     p.items = items.slice(0);
-    p.filteredItems = null;
     p.itemsChanged = true;
 
     this._updateItemByValueMap();
@@ -3086,8 +3699,8 @@ class SelectBox {
   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;
@@ -3097,9 +3710,7 @@ class SelectBox {
 
   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) {
@@ -3199,11 +3810,7 @@ class SelectBox {
 
     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;
@@ -3221,11 +3828,7 @@ class SelectBox {
 
   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;
   }
 
@@ -3262,7 +3865,6 @@ class SelectBox {
     return this;
 
     p.sortListItems = sortListItems;
-    p.filteredItems = null;
     p.itemsChanged = true;
     this._scheduleSync('render_list');
     return this;
@@ -3351,6 +3953,8 @@ class SelectBox {
     return this;
 
     p.treatGroupSelectionAsItems = treatGroupSelectionAsItems;
+    p.dropList?.setFilterGroups(treatGroupSelectionAsItems);
+    p.dropList?.setFilterEmptyGroups(!treatGroupSelectionAsItems);
     p.itemsChanged = true;
     this._scheduleSync('render_list');
     return this;
@@ -3530,8 +4134,7 @@ class SelectBox {
    * @returns {SelectBox}
    */
   setNoResultsText(noResultsText) {
-    this._p.noResultsText = noResultsText;
-    this._scheduleSync('render_list');
+    this._p.dropList?.setNoResultsText(noResultsText);
     return this;
   }
 
@@ -3549,17 +4152,7 @@ class SelectBox {
   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;
   }
 
@@ -3578,8 +4171,7 @@ class SelectBox {
     const p = this._p;
     if (p.filterOnEmptyTerm === value)
     return this;
-    p.filterOnEmptyTerm = value;
-    p.throttledUpdateListItems();
+    p.dropList?.setFilterOnEmptyTerm(value);
     return this;
   }
 
@@ -3721,8 +4313,21 @@ class SelectBox {
     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;
   }
 
@@ -3902,7 +4507,7 @@ class SelectBox {
     // 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.
@@ -4295,31 +4900,14 @@ class SelectBox {
     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;
 
@@ -4337,6 +4925,16 @@ class SelectBox {
       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':{
@@ -4491,6 +5089,15 @@ class SelectBox {
 
           case 'blur':
             this._handleOnBlur();
+            break;
+
+          case 'search':
+            this._trigger('search', event);
+            break;
+
+          case 'itemschanged':
+            this._trigger('itemschanged', event);
+            break;
         }
       }
     });
@@ -4521,8 +5128,7 @@ class SelectBox {
       p.dropList && this.droplistElContains(document.activeElement, true))) {
         return;
       }
-      if (p.throttledUpdateListItems)
-      p.throttledUpdateListItems.cancel();
+
       this.closeList();
     });
   }
@@ -4669,12 +5275,9 @@ class SelectBox {
         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;
@@ -4779,15 +5382,16 @@ class SelectBox {
     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 {
@@ -4802,15 +5406,16 @@ class SelectBox {
     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 {
@@ -4827,37 +5432,19 @@ class SelectBox {
     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;
@@ -4887,77 +5474,6 @@ class SelectBox {
     }
   }
 
-  /** @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;
@@ -5596,8 +6112,7 @@ class SelectBox {
     p.input.value = value == null ? '' : String(value);
 
     p.filterTerm = '';
-    p.filteredItems = null;
-    p.itemsChanged = true;
+    p.dropList?.setSearchTerm('', true);
   }
 
   /**
@@ -5718,7 +6233,7 @@ class SelectBox {
     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;
     }