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", "https://huggingface.co"] ), 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", ]