diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index 107e910a60..94d4f2b768 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -11,6 +11,7 @@ export let getOptionLabel = option => option export let getOptionValue = option => option export let readonly = false + export let autocomplete = false const dispatch = createEventDispatcher() $: selectedLookupMap = getSelectedLookupMap(value) @@ -77,6 +78,7 @@ {fieldText} {options} isPlaceholder={!value?.length} + {autocomplete} {isOptionSelected} {getOptionLabel} {getOptionValue} diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 3de454668c..de7bfb02b8 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -5,6 +5,7 @@ import { fly } from "svelte/transition" import { createEventDispatcher } from "svelte" import clickOutside from "../../Actions/click_outside" + import Search from "./Search.svelte" export let id = null export let disabled = false @@ -23,16 +24,24 @@ export let readonly = false export let quiet = false export let autoWidth = false + export let autocomplete = false const dispatch = createEventDispatcher() + let searchTerm = null $: sortedOptions = getSortedOptions(options, getOptionLabel) + $: filteredOptions = getFilteredOptions( + sortedOptions, + searchTerm, + getOptionLabel + ) const onClick = () => { dispatch("click") if (readonly) { return } + searchTerm = null open = true } @@ -46,6 +55,16 @@ return labelA > labelB ? 1 : -1 }) } + + const getFilteredOptions = (options, term, getLabel) => { + if (autocomplete && term) { + const lowerCaseTerm = term.toLowerCase() + return options.filter(option => + getLabel(option)?.toLowerCase().includes(lowerCaseTerm) + ) + } + return options + }