Autocomplete

Overview

Autocomplete allows the user to enter free text or select from a list of dynamic values and is based on the Angular Material autocomplete component.

This components only renders text labels and values.

The autocomplete filters by case-insensitively matching substrings of the option label.

Currently, there is no on blur event with this component since the blur event does not get the selected value on the first blur. Due to this ambiguous behavior, the blur event has been left out.

Examples

import mesop as me


@me.stateclass
class State:
  raw_value: str
  selected_value: str = "California"


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/autocomplete",
)
def app():
  state = me.state(State)

  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.autocomplete(
      label="Select state",
      value=state.selected_value,
      options=_make_autocomplete_options(),
      on_selection_change=on_value_change,
      on_enter=on_value_change,
      on_input=on_input,
      appearance="outline",
    )

    if state.selected_value:
      me.text("Selected: " + state.selected_value)


def on_value_change(
  e: me.AutocompleteEnterEvent | me.AutocompleteSelectionChangeEvent,
):
  state = me.state(State)
  state.selected_value = e.value


def on_input(e: me.InputEvent):
  state = me.state(State)
  state.raw_value = e.value


def _make_autocomplete_options() -> list[me.AutocompleteOptionGroup]:
  """Creates and filter autocomplete options.

  The states list assumed to be alphabetized and we group by the first letter of the
  state's name.
  """
  states_options_list = []
  sub_group = None
  for state in _STATES:
    if not sub_group or sub_group.label != state[0]:
      if sub_group:
        states_options_list.append(sub_group)
      sub_group = me.AutocompleteOptionGroup(label=state[0], options=[])
    sub_group.options.append(me.AutocompleteOption(label=state, value=state))
  if sub_group:
    states_options_list.append(sub_group)
  return states_options_list


_STATES = [
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida",
  "Georgia",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Pennsylvania",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming",
]

API

autocomplete

Creates an autocomplete component.

PARAMETER	DESCRIPTION
options	Selectable options from autocomplete. TYPE: Iterable[AutocompleteOption | AutocompleteOptionGroup] | None DEFAULT: None
label	Label for input. TYPE: str DEFAULT: ''
on_selection_change	Event emitted when the selected value has been changed by the user. TYPE: Callable[[AutocompleteSelectionChangeEvent], Any] | None DEFAULT: None
on_input	input is fired whenever the input has changed (e.g. user types). TYPE: Callable[[InputEvent], Any] | None DEFAULT: None
on_enter	triggers when the browser detects an "Enter" key on a keyup native browser event. TYPE: Callable[[AutocompleteEnterEvent], Any] | None DEFAULT: None
appearance	The form field appearance style. TYPE: Literal['fill', 'outline'] DEFAULT: 'fill'
disabled	Whether it's disabled. TYPE: bool DEFAULT: False
placeholder	Placeholder value. TYPE: str DEFAULT: ''
value	Initial value. TYPE: str DEFAULT: ''
readonly	Whether the element is readonly. TYPE: bool DEFAULT: False
hide_required_marker	Whether the required marker should be hidden. TYPE: bool DEFAULT: False
color	The color palette for the form field. TYPE: Literal['primary', 'accent', 'warn'] DEFAULT: 'primary'
float_label	Whether the label should always float or float as the user types. TYPE: Literal['always', 'auto'] DEFAULT: 'auto'
subscript_sizing	Whether the form field should reserve space for one line of hint/error text (default) or to have the spacing grow from 0px as needed based on the size of the hint/error content. Note that when using dynamic sizing, layout shifts will occur when hint/error text changes. TYPE: Literal['fixed', 'dynamic'] DEFAULT: 'fixed'
hint_label	Text for the form field hint. TYPE: str DEFAULT: ''
style	Style for input. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

AutocompleteOption dataclass

Represents an option in the autocomplete drop down.

ATTRIBUTE	DESCRIPTION
label	Content to show for the autocomplete option TYPE: str | None
value	The value of this autocomplete option. TYPE: str | None

AutocompleteOptionGroup dataclass

Represents an option group to group options in the autocomplete drop down.

ATTRIBUTE	DESCRIPTION
label	Group label TYPE: str
options	Autocomplete options under this group TYPE: list[AutocompleteOption]

AutocompleteEnterEvent dataclass

Bases: MesopEvent

Represents an "Enter" keyboard event on an autocomplete component.

ATTRIBUTE	DESCRIPTION
value	Input/selected value. TYPE: str
key	key of the component that emitted this event. TYPE: str

AutocompleteSelectionChangeEvent dataclass

Bases: MesopEvent

Represents a selection change event.

ATTRIBUTE	DESCRIPTION
value	Selected value. TYPE: str
key	key of the component that emitted this event. TYPE: str

InputEvent dataclass

Bases: MesopEvent

Represents a user input event.

ATTRIBUTE	DESCRIPTION
value	Input value. TYPE: str
key	key of the component that emitted this event. TYPE: str