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.

Set the maxium number of items to show

Select.withCutoff 6 config

Add a callback for when the query changes

Select.withOnQuery OnQuery

Show results if the input is focused, but the query is empty Default is False. Select.withEmptySearch 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


Select.withTransformQuery transform config

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.

Select.withOnRemoveItem OnRemoveItem

Add classes to the container of selected items

Select.withMultiInputItemContainerClass "bg-white" config

Add styles to the container of selected items

Select.withMultiInputClass "bg-white" config

Add classes to an individual selected item

Select.withMultiInputItemClass "bg-white" config

Add styles to an individual selected item

Select.withMultiInputItemStyles [ ( "padding", "1rem" ) ] config

Add classes to the input control

Select.withInputControlClass "control-class" config

Add styles to the input control

Select.withInputControlClass [ ( "background-color", "red" ) ] config

Add classes to the input wrapper (element that wraps the input and the clear button)

Select.withInputWrapperClass "col-12" config

Add styles to the input wrapper

Select.withInputWrapperStyles [ ( "color", "red" ) ] config

Set the ID of the input

Select.withInputId "input-id" config

Add classes to the input

Select.withInputClass "col-12" config

Add styles to the input

Select.withInputStyles [ ( "color", "red" ) ] config

Add a callback for when the input field receives focus

Select.withOnFocus OnFocus

Remove the clear button entirely

Select.withClear False

Add classes to the clear button

Select.withClearClass "clear" config

Add styles to the clear button

Select.withClearStyles [ ( "width", "2rem" ) ] config

Add classes to the clear SVG icon

Select.withClearSvgClass "clear" config

Add classes to the underline div

Select.withUnderlineClass "underline" config

Add styles to the underline div

Select.withUnderlineStyles [ ( "width", "2rem" ) ] config

Add classes to the items

Select.withItemClass "border-bottom" config

Add styles to the items

Select.withItemStyles [ ( "color", "peru" ) ] config

Custom item element HTML

Select.withItemHtml (\i -> Html.li [] [ text i ]) config

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

Class for the hightlighted tem

Select.withHighlightedItemClass "red" config

Styles for the highlighted item

Select.withHighlightedItemStyles [ ( "padding", "1rem" ) ] config

Add classes to the menu

Select.withMenuClass "bg-white" config

Add styles to the menu

Select.withMenuStyles [ ( "padding", "1rem" ) ] config

Text that will appear when no matches are found

Select.withNotFound "No matches" config

Class for the not found message

Select.withNotFoundClass "red" config

Hide menu when no matches found

Select.withNotFoundShown False config

Styles for the not found message

Select.withNotFoundStyles [ ( "padding", "1rem" ) ] config

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

Select.withPrompt "Select a movie" config

Add classes to the prompt text (When no item is selected) Select.withPromptClass "prompt" config

Add styles to prompt text

Select.withPromptStyles [ ( "color", "red" ) ] config

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

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

Return the query string from the current state model

Select.queryFromState model.selectState

Render the view

Select.view
    selectConfig
    model.selectState
    model.items
    selectedItems

Update the component state

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