Autocomplete

Autocompletion out of the limits.

Example

Orange
Apple
Banana
Pear
Blackberry

Fixed width

Orange

Props

🕹️ standard props

values

ItemData[]

The selected values for the autocomplete.

[]

items

ItemData[]

The list of items to display in the dropdown.

[]

searchFunction

function

Custom search function for filtering items based on the search text.

undefined

multiple

boolean

If true, allows multiple selections. Otherwise, only one selection is allowed.

false

disabled

boolean

If true, disables the autocomplete.

false

mandatory

boolean

If true, at least one item must be selected.

false

placeholder

string

The placeholder text to display in the input field.

""

width

string

The width of the autocomplete container.

"auto"

height

string

The height of the autocomplete container.

"auto"

maxWidth

string | undefined

The maximum width of the autocomplete container.

undefined

minWidth

string

The minimum width of the autocomplete container.

"200px"

openingId

string

The id used for opening the menu.

"autocomplete-menu"

searchText

string | undefined

The text entered into the search input.

undefined

maxVisibleChips

number | undefined

The maximum number of chips to display.

undefined

menuOpened

boolean

Controls whether the dropdown menu is open or closed.

false

closeOnSelect

boolean

If true, closes the menu when an item is selected.

true

emptySearchTextOnMenuClose

boolean

If true, clears the search text when the menu is closed.

true

menuBoxShadow

string

The CSS box-shadow for the menu.

"rgb(var(--global-color-background-300), .5) 0px 2px 4px"

menuBorderRadius

string

The border-radius for the menu.

"5px"

mobileDrawer

boolean

If true, a drawer menu is used for mobile devices.

false

adaptInputWidth

boolean

If true the width of the search input adapt based on the content inside.

true

menuWidth

string | null

The width of the menu.

null

menuAnchor

"bottom" | "bottom-center" | "right-center"

The anchor of the menu.

"bottom-center"

class

object

CSS classes to apply to different parts of the component.

undefined

🎨 style props

--autocomplete-background-color

color

The background color of the selection container.

rgb(var(--global-color-background-300), .5)

--autocomplete-border

border

The border of the selection container.

--autocomplete-border-radius

radius

The border radius of the selection container.

4px

--autocomplete-focus-border

border

The border when the selection container is focused.

var(--autocomplete-border)

--autocomplete-focus-box-shadow

box-shadow

The box-shadow when the selection container is focused.

--autocomplete-selected-item-background-color

color

The background color of the selected item.

rgb(var(--global-color-primary-500))

--autocomplete-selected-item-color

color

The text color of the selected item.

rgb(var(--global-color-grey-50))

--autocomplete-focused-item-background-color

color

The background color of the focused item.

rgb(var(--global-color-primary-500), .2)

--autocomplete-focused-item-color

color

The text color of the focused item.

rgb(var(--global-color-contrast-900))

--autocomplete-hover-item-background-color

color

The background color of the hovered item.

rgb(var(--global-color-primary-500), .1)

--autocomplete-hover-item-color

color

The text color of the hovered item.

rgb(var(--global-color-contrast-900))

--autocomplete-padding

spacing

The padding inside the selection container.

0.5rem .5rem .5rem .5rem

--autocomplete-min-height

size

The minimum height of the selection container.

2rem

--autocomplete-options-max-width

size

The maximum width of the selection options.

100%

--autocomplete-input-margin-left

spacing

The margin-left for the autocomplete input.

4px

--autocomplete-input-width

spacing

The width for the autocomplete search input.

Slots

selectionContainerSnippet

Renders the container for selected items.

Default content:


<div
  class="selection-container"
>
  {#each (values || []).slice(0, maxVisibleChips) as selection}
    {#if selectionSnippet}
      {@render selectionSnippet({ selection, unselect})}
    {:else}
      <div tabindex="-1">
        <Chip
          close={true}
          onclose={() => unselect(selection)}
          --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
          buttonTabIndex={-1}
          truncateText
        >
          {#if chipLabelSnippet}
            {@render chipLabelSnippet({ selection })}
          {:else}
            {selection.label}
          {/if}
        </Chip>
      </div>
    {/if}
  {/each}
  {#if maxVisibleChips !== undefined && notVisibleChipNumber > 0}
    {#if exceedCounterSnippet}
      {@render exceedCounterSnippet({ notVisibleChipNumber, maxVisibleChips, values, searchText, disabled })}
    {:else}
      <div class="not-visible-chip-number">+ {notVisibleChipNumber}</div>
    {/if}
  {/if}

  <input
    class="autocomplete-input"
    bind:value={searchText}
    onfocus={handleTextFieldFocus}
    onblur={handleTextFieldBlur}
    onkeydown={handleKeyDown}
    {disabled}
    placeholder={placeholder}
    bind:this={input}
  />
</div>

Available variables:

Name	Type	Description
`values`	`ItemData[]`	The selected values for the autocomplete.
`searchText`	`string \| undefined`	The current search text.
`disabled`	`boolean`	If true, the component is disabled.
`openMenu`	`function`	Function to open the menu.
`handleKeyDown`	`function`	Function to handle key down events.
`unselect`	`function`	Function to unselect an item.
`select`	`function`	Function to select an item.

selectionSnippet

Renders each selected item.

Default content:


<div tabindex="-1">
  <Chip
    close={true}
    onclose={() => unselect(selection)}
    --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
    buttonTabIndex={-1}
    truncateText
  >
    {#if chipLabelSnippet}
      {@render chipLabelSnippet({ selection })}
    {:else}
      {selection.label}
    {/if}
  </Chip>
</div>

Available variables:

Name	Type	Description
`selection`	`ItemData`	The selected item.
`unselect`	`function`	Function to unselect the item.

chipLabelSnippet

Renders the label inside each chip.

Default content:

{selection.label}

Available variables:

Name	Type	Description
`selection`	`ItemData`	The selected item.

exceedCounterSnippet

Renders the counter for chips exceeding the maximum visible count.

Default content:

<div class="not-visible-chip-number">+ {notVisibleChipNumber}</div>

Available variables:

Name	Type	Description
`notVisibleChipNumber`	`number`	Number of chips not visible.
`maxVisibleChips`	`number`	Maximum visible chips.
`values`	`ItemData[]`	The selected items.
`searchText`	`string \| undefined`	The current search text.
`disabled`	`boolean`	If true, the component is disabled.

menuSnippet

Renders the menu container.

Default content:


{#if !mobileDrawer}
  <Menu
    {activator}
    _width={localMenuWidth || ""}
    _height={menuHeight}
    _maxHeight="300px"
    _boxShadow={menuBoxShadow}
    _borderRadius={menuBorderRadius}
    bind:open={menuOpened}
    anchor="bottom-center"
    closeOnClickOutside
    bind:refreshPosition
    bind:menuElement
    bind:openingId={openingId}
    flipOnOverflow
  >
    <ul
      class={clazz.menu || ''}
      style:background-color="rgb(var(--global-color-background-100))"
    >
      {#each filteredItems as item, index}
        <li class="item-{index}">
          {#if itemSnippet}
            {@render itemSnippet({
              item,
              index,
              selected: (values || [])
                .findIndex((i) => { return i.value == item.value }) != -1
            })}
          {:else}
            <div
              class:selection-item={true}
              class:focused={index == focusedIndex}
              class:selected={(values || []).findIndex((i) => {
                return i.value == item.value;
              }) != -1}
              onclick={() => toggle(item)}
              onkeypress={() => toggle(item)}
              role="button"
              tabindex="0"
            >
              {#if itemLabelSnippet}
                {@render itemLabelSnippet({ item })}
              {:else}
                {item.label}
              {/if}
            </div>
          {/if}
        </li>
      {/each}
    </ul>
  </Menu>
{:else}
  <MenuOrDrawer
    menuProps={{
      activator,
      _width: localMenuWidth || "", 
      _height: menuHeight,
      _maxHeight: "300px",
      _boxShadow: menuBoxShadow,
      _borderRadius: menuBorderRadius,
    }}
    drawerProps={{
      onclose
    }}
    bind:open={menuOpened}
  >
    <ul
      class={clazz.menu || ''}
      style:background-color="rgb(var(--global-color-background-100))"
    >
      {#each filteredItems as item, index}
        <li class="item-{index}">
          {#if itemSnippet}
            {@render itemSnippet({
              item,
              index,
              selected: (values || [])
                .findIndex((i) => { return i.value == item.value }) != -1
            })}
          {:else}
            <div
              class:selection-item={true}
              class:focused={index == focusedIndex}
              class:selected={(values || []).findIndex((i) => {
                return i.value == item.value;
              }) != -1}
              onclick={() => toggle(item)}
              onkeypress={() => toggle(item)}
              role="button"
              tabindex="0"
            >
              {#if itemLabelSnippet}
                {@render itemLabelSnippet({ item })}
              {:else}
                {item.label}
              {/if}
            </div>
          {/if}
        </li>
      {/each}
    </ul>
  </MenuOrDrawer>
{/if}

itemLabelSnippet

Renders the label of an item.

Default content:

{item.label}

Available variables:

Name	Type	Description
`item`	`ItemData`	The item to render the label for.

itemSnippet

Renders each item in the dropdown menu.

Default content:


<div
  class:selection-item={true}
  class:focused={index == focusedIndex}
  class:selected={(values || []).findIndex((i) => {
    return i.value == item.value;
  }) != -1}
  onclick={() => toggle(item)}
  onkeypress={() => toggle(item)}
  role="button"
  tabindex="0"
>
  {#if itemLabelSnippet}
    {@render itemLabelSnippet({ item })}
  {:else}
    {item.label}
  {/if}
</div>

Available variables:

Name	Type	Description
`item`	`ItemData`	The item to render.
`index`	`number`	The index of the item in the list.
`selected`	`boolean`	Indicates if the item is selected.

Events

onchange

Fired when the selection changes.

Attribute	Type	Description
unselect	`ItemData \| undefined`	The item that was unselected.
select	`ItemData \| undefined`	The item that was selected.
selection	`ItemData[]`	The current selection of items.

onfocus

Fired when the input field is focused.

onblur

Fired when the input field loses focus.

onkeydown

Fired when a key is pressed in the input field.

onclose

Fired when the menu is closed.