Required initial configuration

• onSelect: A message to trigger when an item is selected
• toLabel: A function to get a label to display from an item
• filter: A function that takes the typed query and the list of all items, and return the filtered items.

Opaque type that holds all the configuration

Opaque type that holds the current state

Opaque type for internal library messages

Create a new configuration. This takes as RequiredConfig record.

Allow users to write a custom values (free text entry) You must provide a function that converst a String into an item

config
    |> Select.withCustomInput (\string -> item)

Set the maxium number of items to show

config
    |> Select.withCutoff 6

Add a callback for when the query changes.

config
    |> Select.withOnQuery OnQuery

Show results if the input is focused, but the query is empty. Similar to a dropdown, focusing on the input will show the menu.

Default is False.

Select.withEmptySearch True config

Preserve the current query when the input receives focus. When True, clicking on the input will not clear the existing query. When False, clicking on the input will clear the query if emptySearch is enabled.

Default is False.

Select.withPreserveQueryOnFocus True config

Transform the input query before performing the search Return Nothing to prevent searching

transform : String -> Maybe String
transform query =
    if String.length query < 4 then
        Nothing
    else
        Just query


config
|> Select.withTransformQuery transform

Transform the input This can be used to restrict input to certain characters. Returning "" effectively disables input

transform : String -> String
transform input =
    ""


config
|> Select.withTransformInput transform

Use a multi select instead of a single select.

Message to call when removing an individual item. Please note that without this option specified, you will not be able to remove an individual item from MultiSelect mode.

config
    |> Select.withOnRemoveItem OnRemoveItem

Set attributes for the container of selected items.

config
    |> Select.withMultiInputItemContainerAttrs [ class "bg-white" ]

Add attributes for the container of selected items. This adds to existing attributes.

config
    |> Select.withMultiInputItemContainerAttrs [ class "bg-white" ]

Set attributes for an individual selected item.

config
    |> Select.withMultiInputItemAttrs [ class "bg-white" ]

Add attributes to an individual selected item. This adds to existing attributes.

config
    |> Select.withMultiInputItemMoreAttrs [ class "bg-white" ]

Which items are removeable from the list

config
    |> Select.withMultiInputItemRemovable (\x -> x.removeable)

Set attributes for the input wrapper (element that wraps the input and the clear button). This overrides any attributes already set in a previous call.

config
    |> Select.withInputWrapperAttrs [ class "col-12" ]

Add attributes to the input wrapper (element that wraps the input and the clear button). This adds to existing attributes.

config
    |> Select.withInputWrapperMoreAttrs [ class "col-12" ]

Set attributes for the input. This overrides any attributes already set in a previous call.

config
    |> Select.withInputAttrs [ class "col-12" ]

Add attributes to the input. This adds to existing attributes.

config
    |> Select.withInputMoreAttrs [ class "col-12" ]

Add a callback for when the input field receives focus.

config
    |> Select.withOnFocus OnFocus

Add a callback for when the input field loses focus.

config
    |> Select.withOnBlur OnBlur

Add a callback for when the Escape key is pressed.

config
    |> Select.withOnEsc OnEsc

Add a callback for when the Up Arrow key is pressed.

config
    |> Select.withOnArrowUp OnArrowUp

Add a callback for when the Down Arrow key is pressed.

config
    |> Select.withOnArrowDown OnArrowDown

Specify a custom list of separators for the query The default is [ "\n", "\t", "," ]

config
    |> Select.withValueSeparators []

Remove the clear button entirely

config
    |> Select.withClear False

Set attributes for the clear button. This overrides any attributes already set in a previous call.

config
    |> Select.withClearAttrs [ class "clear" ]

Add attributes to the clear button. This adds to existing attributes.

config
    |> Select.withClearMoreAttrs [ class "clear" ]

Set classes for the clear SVG icon

config
    |> Select.withClearSvgClass "clear"

Use your own html for the clear icon

config
    |> Select.withClearHtml (Just (text "X"))

Set attributes for the items. This overrides any attributes already set in a previous call.

config
    |> Select.withItemAttrs [ class "border-bottom" ]

Add attributes to the items. This adds to existing attributes.

config
    |> Select.withItemMoreAttrs [ class "border-bottom" ]

Custom item element HTML

config
    |> Select.withItemHtml (\query item -> Html.li [] [ text item ])

When this is used the original toLabel function in the config is ignored.

Set attributes for the hightlighted item.

config
    |> Select.withHighlightedItemAttrs [ class "red" ]

Add attributes to the hightlighted item.

config
    |> Select.withHighlightedItemMoreAttrs [ class "red" ]

Set attributes for the selected item in the menu.

config
    |> Select.withItemSelectedAttrs [ class "selected" ]

Add attributes to the selected item in the menu.

config
    |> Select.withItemSelectedMoreAttrs [ class "selected" ]

Set attributes for the menu. This overrides any attributes already set in a previous call.

config
    |> Select.withMenuAttrs [ class "bg-white" ]

Add attributes to the menu. This adds to existing attributes.

config
    |> Select.withMenuMoreAttrs [ class "bg-white" ]

Set attributes for the root container. This overrides any attributes already set in a previous call.

config
    |> Select.withRootAttrs [ class "bg-white" ]

Add attributes to the root container. This adds to existing attributes.

config
    |> Select.withRootMoreAttrs [ class "bg-white" ]

Text that will appear when no matches are found.

config
    |> Select.withNotFound "No matches"

Set attributes for the not found message.

config
    |> Select.withNotFoundAttrs [ class "red" ]

Add attributes to the not found message. This adds to existing attributes.

config
    |> Select.withNotFoundMoreAttrs [ class "red" ]

Hide menu when no matches found.

config
    |> Select.withNotFoundShown False

Add a prompt text to be displayed when no element is selected.

config
    |> Select.withPrompt "Select a movie"

Set attributes for the prompt text (When no item is selected)

config
    |> Select.withPromptAttrs [ class "prompt" ]

Add attributes to the prompt text (When no item is selected) This adds to existing attributes.

config
    |> Select.withPromptMoreAttrs [ class "prompt" ]

Create a new state. You must pass a unique identifier for each select component.

{
    ...
    selectState = Select.init "select1"
}

Return the query string from the current state model

Select.queryFromState model.selectState

Change the current query

Select.withQuery (Just "hello") selectModel

Render the view

Select.view
    selectConfig
    model.selectState
    availableItems
    selectedItems

Update the component state

SelectMsg subMsg ->
    let
        ( updated, cmd ) =
            Select.update selectConfig subMsg model.selectState
    in
        ( { model | selectState = updated }, cmd )