@danielgindi/selectbox 1.0.147 → 2.0.0

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 1.0.147
+ * @danielgindi/selectbox 2.0.0
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -12,9 +12,57 @@ import mitt from '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;
 
@@ -40,7 +88,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]
  * */
 /** */
 
@@ -104,6 +162,13 @@ let defaultOptions$1 = {
     valueProp: 'value',
 
     on: null,
+
+    searchable: false,
+    noResultsText: 'No matching results',
+    filterThrottleWindow: 300,
+    filterOnEmptyTerm: false,
+    filterGroups: false,
+    filterEmptyGroups: false,
 };
 
 /*
@@ -164,17 +229,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));
@@ -185,31 +268,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';
-            setCssProps(/**@type ElementCSSInlineStyle*/el, initialCss);
+        let wrapperEl = o.el;
+
+        if (wrapperEl instanceof Element) {
+            p.elOriginalDisplay = wrapperEl.style.display || '';
+            wrapperEl.classList.add(...classes);
+            setCssProps(/**@type ElementCSSInlineStyle*/wrapperEl, initialCss);
             p.ownsEl = false;
         } else {
-            el = createElement('ul', {
+            wrapperEl = createElement('div', {
                 class: classes.join(' '),
-                role: 'menu',
                 css: initialCss,
             });
         }
 
-        p.el = el;
+        let menuEl = createElement('ul');
+        menuEl.role = 'menu';
 
-        p.items = [];
+        if (o.searchable) {
+            p.headerEl = createElement('div', {
+                class:  p.baseClassName + '_header',
+            });
 
-        p.groupCount = 0; // This will keep state of how many `group` items we have
+            p.searchInput = 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,
@@ -236,7 +342,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) {
@@ -282,36 +400,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;
     }
@@ -329,7 +431,7 @@ class DropList {
         p.sink.remove();
         p.virtualListHelper.destroy();
 
-        if (p.el) {
+        if (p.el?.parentNode) {
             remove(p.el);
         }
 
@@ -338,13 +440,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] = '';
             }
@@ -359,6 +463,8 @@ class DropList {
             delete p.lastPositionTarget;
         }
 
+        delete p.lastPositionOptions;
+
         this._p = null;
     }
 
@@ -442,16 +548,47 @@ class DropList {
      */
     setUnrenderItem(fn) {
         const p = this._p;
-
         p.unrenderItem = fn;
+        this._setupUnrenderFunction();
+        return this;
+    }
+
+    /**
+     * @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;
+    }
 
-        if (typeof p.unrenderItem === 'function') {
+    /**
+     * @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];
 
@@ -486,7 +623,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);
@@ -513,7 +651,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) {
@@ -664,9 +803,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;
     }
@@ -680,9 +834,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();
@@ -733,9 +889,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();
         }
 
@@ -754,9 +919,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;
     }
@@ -765,10 +948,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;
@@ -804,8 +990,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;
             }
@@ -817,8 +1018,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;
             }
@@ -827,6 +1043,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]);
     }
@@ -843,19 +1089,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, performSearch = 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 || getElementOffset(positionOptions.target);
@@ -918,18 +1465,25 @@ class DropList {
         let verticalBorderWidth = (parseFloat(elComputedStyle.borderTopWidth) || 0) +
             (parseFloat(elComputedStyle.borderBottomWidth) || 0);
 
+        let headerHeight = 0;
+        if (p.headerEl) {
+            headerHeight = 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(getElementHeight(p.el), el.scrollHeight);
+            maxViewHeight = Math.max(getElementHeight(p.el), menuEl.scrollHeight);
             maxViewHeight += verticalPadding + verticalBorderWidth;
         }
 
@@ -1064,6 +1618,11 @@ class DropList {
         setCssProps(el, viewCss);
         setElementHeight(el, viewSize.height, true, true);
 
+        if (menuEl !== el) {
+            let menuHeight = viewSize.height - headerHeight - verticalBorderWidth - verticalPadding;
+            setElementHeight(menuEl, menuHeight, true, true);
+        }
+
         // Update the scroll position for virtual lists
         p.virtualListHelper.render();
 
@@ -1201,7 +1760,7 @@ class DropList {
 
     /**
      *
-     * @param {DropList.PositionOptions?} positionOptions
+     * @param {DropList.PositionOptions?} [positionOptions]
      * @returns {DropList}
      * @public
      */
@@ -1228,6 +1787,10 @@ class DropList {
             }
         });
 
+        if (p.needsRefilter) {
+            this._refilterItems();
+        }
+
         const el = p.el;
         el.style.position = 'absolute';
         el.classList.remove(`${p.baseClassName}__is-hiding`);
@@ -1239,6 +1802,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);
 
@@ -1285,6 +1856,11 @@ class DropList {
 
             p.hiding = true;
 
+            if (this.isFilterPending()) {
+                p.throttledRefilterItems.cancel();
+                p.needsRefilter = true;
+            }
+
             if (el) {
 
                 el.classList.add(`${p.baseClassName}__is-hiding`);
@@ -1305,7 +1881,8 @@ class DropList {
                         }
                     });
                 } else {
-                    remove(el);
+                    if (el.parentNode)
+                        remove(el);
                     el.classList.remove(`${p.baseClassName}__is-hiding`);
                 }
             }
@@ -1354,15 +1931,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;
 
@@ -1417,6 +2001,7 @@ class DropList {
             valueProp: p.valueProp,
             renderItem: p.renderItem,
             unrenderItem: p.unrenderItem,
+            positionOptionsProvider: () => p.currentSubDropList.showOptions,
         });
 
         let onBlur = event => {
@@ -1464,7 +2049,7 @@ class DropList {
             },
         };
 
-        droplist.show(p.currentSubDropList.showOptions);
+        droplist.show();
 
         droplist.el.focus();
     }
@@ -1518,7 +2103,7 @@ class DropList {
 
                 if (itemElement) {
                     p.currentSubDropList.showOptions.target = itemElement;
-                    p.currentSubDropList.droplist.relayout(p.currentSubDropList.showOptions);
+                    p.currentSubDropList.droplist.relayout();
                 }
             }
         }
@@ -1529,7 +2114,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);
@@ -1545,7 +2131,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);
@@ -1558,7 +2151,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);
@@ -1578,24 +2172,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);
 
@@ -1618,8 +2230,6 @@ class DropList {
                 p.virtualListHelper.render();
             }
         }
-
-        return this;
     }
 
     /**
@@ -1680,7 +2290,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;
@@ -1828,12 +2439,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;
 
@@ -1844,7 +2468,7 @@ class DropList {
                     this._delayBlurItemOnBlur();
                     this._trigger('blur', event);
                 });
-            });
+            }, true);
     }
 
     _hookKeyEvents() {
@@ -1853,6 +2477,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;
 
@@ -1897,7 +2536,8 @@ class DropList {
             case VALUE_RIGHT:
                 if (event.key === VALUE_RIGHT && getComputedStyle(event.target).direction !== 'rtl' ||
                     event.key === 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 {
@@ -1927,7 +2567,11 @@ class DropList {
 
             default: {
                 if (event.type === 'keydown') return;
-                this._keydownFreeType(event);
+
+                // Inline search box not available, then support typing to focus by first letters
+                if (!p.searchable)
+                    this._keydownFreeType(event);
+
                 preventDefault = false;
             }
         }
@@ -1952,12 +2596,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)
@@ -1971,11 +2617,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)
@@ -1989,7 +2635,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
@@ -2016,6 +2662,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) {
@@ -2041,7 +2691,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,
@@ -2076,12 +2727,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())
@@ -2089,7 +2741,7 @@ class DropList {
 
             nextIndex = p.focusItemIndex - 1;
             if (nextIndex === -1) {
-                nextIndex = p.items.length - 1;
+                nextIndex = items.length - 1;
             }
 
             directionUp = true;
@@ -2098,7 +2750,7 @@ class DropList {
                 return this._move('first', event);
 
             nextIndex = p.focusItemIndex + 1;
-            if (nextIndex === p.items.length) {
+            if (nextIndex === items.length) {
                 nextIndex = 0;
             }
 
@@ -2127,8 +2779,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 = getElementOffset(p.focusItemEl).top;
@@ -2165,13 +2817,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;
 
@@ -2188,7 +2840,7 @@ class DropList {
                 }
             }
 
-            item = p.items[nextIndex];
+            item = items[nextIndex];
 
             if (nextIndex === startedAtIndex) {
                 break;
@@ -2204,7 +2856,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) {
@@ -2219,7 +2873,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++) {
@@ -2262,7 +2916,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;
 
@@ -2288,7 +2942,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;
@@ -2414,7 +3068,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;
         }
@@ -2434,7 +3088,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(createElement('div', {
+                class: 'droplist-no-results-content',
+                textContent: p.noResultsText,
+            }));
+            return;
+        }
+
+        if (!p.renderItem || p.renderItem(originalItem || item, itemEl) === false) {
             itemEl.appendChild(createElement('span', {
                 class: `${p.baseClassName}__item_label`,
                 textContent: item.label,
@@ -2476,7 +3144,7 @@ class DropList {
         }
 
         let autoWidth = 0;
-        if (!p.useExactTargetWidth) {
+        if (!p.useExactTargetWidth || !targetWidth) {
             if (p.estimateWidth || p.virtualListHelper.isVirtual()) {
                 autoWidth = p.lastMeasureItemWidth;
             } else {
@@ -2503,56 +3171,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
@@ -2610,10 +3230,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']
@@ -2630,6 +3246,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]
@@ -2748,8 +3368,6 @@ class SelectBox {
             multiPlaceholderFormatter: o.multiPlaceholderFormatter,
             searchable: o.searchable,
             noResultsText: o.noResultsText,
-            filterThrottleWindow: o.filterThrottleWindow,
-            filterOnEmptyTerm: o.filterOnEmptyTerm,
 
             labelProp: o.labelProp,
             valueProp: o.valueProp,
@@ -2766,7 +3384,6 @@ class SelectBox {
             unrenderRestMultiItem: o.unrenderRestMultiItem,
             renderNoResultsItem: o.renderNoResultsItem,
             unrenderNoResultsItem: o.unrenderNoResultsItem,
-            filterFn: o.filterFn,
             on: o.on || null,
             silenceEvents: true,
             mitt: mitt(),
@@ -2774,8 +3391,6 @@ class SelectBox {
             isLoadingMode: !!o.isLoadingMode,
 
             items: [],
-            filteredItems: null,
-            currentItemsView: [], // contains the final version of items sent to DropList
             itemsChanged: true,
 
             sink: new DomEventsSink(),
@@ -2788,10 +3403,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: '',
         };
 
@@ -2903,6 +3517,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
 
@@ -2936,9 +3553,6 @@ class SelectBox {
         p.sink.remove();
         p.dropList && p.dropList.destroy();
 
-        if (p.throttledUpdateListItems)
-            p.throttledUpdateListItems.cancel();
-
         this._cleanupSingleWrapper();
 
         if (p.unrenderMultiItem || p.unrenderRestMultiItem) {
@@ -3067,7 +3681,6 @@ class SelectBox {
             items = [];
 
         p.items = items.slice(0);
-        p.filteredItems = null;
         p.itemsChanged = true;
 
         this._updateItemByValueMap();
@@ -3084,8 +3697,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;
@@ -3095,9 +3708,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) {
@@ -3197,11 +3808,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;
@@ -3219,11 +3826,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;
     }
 
@@ -3260,7 +3863,6 @@ class SelectBox {
             return this;
 
         p.sortListItems = sortListItems;
-        p.filteredItems = null;
         p.itemsChanged = true;
         this._scheduleSync('render_list');
         return this;
@@ -3349,6 +3951,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;
@@ -3528,8 +4132,7 @@ class SelectBox {
      * @returns {SelectBox}
      */
     setNoResultsText(noResultsText) {
-        this._p.noResultsText = noResultsText;
-        this._scheduleSync('render_list');
+        this._p.dropList?.setNoResultsText(noResultsText);
         return this;
     }
 
@@ -3547,17 +4150,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;
     }
 
@@ -3576,8 +4169,7 @@ class SelectBox {
         const p = this._p;
         if (p.filterOnEmptyTerm === value)
             return this;
-        p.filterOnEmptyTerm = value;
-        p.throttledUpdateListItems();
+        p.dropList?.setFilterOnEmptyTerm(value);
         return this;
     }
 
@@ -3719,8 +4311,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;
     }
 
@@ -3900,7 +4505,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.
@@ -4293,31 +4898,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(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;
 
@@ -4335,6 +4923,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': {
@@ -4489,6 +5087,15 @@ class SelectBox {
 
                     case 'blur':
                         this._handleOnBlur();
+                        break;
+
+                    case 'search':
+                        this._trigger('search', event);
+                        break;
+
+                    case 'itemschanged':
+                        this._trigger('itemschanged', event);
+                        break;
                 }
             },
         });
@@ -4519,8 +5126,7 @@ class SelectBox {
                     p.dropList && this.droplistElContains(document.activeElement, true))) {
                 return;
             }
-            if (p.throttledUpdateListItems)
-                p.throttledUpdateListItems.cancel();
+
             this.closeList();
         });
     }
@@ -4667,12 +5273,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;
@@ -4777,15 +5380,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 {
@@ -4800,15 +5404,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 {
@@ -4825,37 +5430,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;
@@ -4885,77 +5472,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;
@@ -5594,8 +6110,7 @@ class SelectBox {
         p.input.value = value == null ? '' : String(value);
 
         p.filterTerm = '';
-        p.filteredItems = null;
-        p.itemsChanged = true;
+        p.dropList?.setSearchTerm('', true);
     }
 
     /**
@@ -5716,7 +6231,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;
         }