Select

Select input with auto-complete

See a full example of the select input here

See a full example of the select input in multi mode here

Types

type alias RequiredConfig msg item =

{ onSelect : Maybe item -> msg

, toLabel : item -> String

, filter : String -> List item -> Maybe (List item)

}

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.

type Config msg item

Opaque type that holds all the configuration

type State

Opaque type that holds the current state

type Msg item

Opaque type for internal library messages

Configuration

newConfig : RequiredConfig msg item -> Config msg item

Create a new configuration. This takes as RequiredConfig record.

withCutoff : Int -> Config msg item -> Config msg item

Set the maxium number of items to show

Select.withCutoff 6 config

withOnQuery : (String -> msg) -> Config msg item -> Config msg item

Add a callback for when the query changes

Select.withOnQuery OnQuery

withEmptySearch : Bool -> Config msg item -> Config msg item

Show results if the input is focused, but the query is empty Default is False. Select.withEmptySearch True config

withTransformQuery : (String -> String) -> Config msg item -> Config msg item

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

withBlur : Bool -> Config msg item -> Config msg item

Styles for the highlighted item

Select.withBlur True config

withOnEnter : (String -> msg) -> Config msg item -> Config msg item

Add a callback for when the query changes

Select.withOnEnter OnEnter

Configure Multi Select mode

withMultiSelection : Bool -> Config msg item -> Config msg item

Use a multi select instead of a single select

withOnRemoveItem : (item -> msg) -> Config msg item -> Config msg item

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

withMultiInputItemContainerClass : String -> Config msg item -> Config msg item

Add classes to the container of selected items

Select.withMultiInputItemContainerClass "bg-white" config

withMultiInputItemContainerStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the container of selected items

Select.withMultiInputClass "bg-white" config

withMultiInputItemClass : String -> Config msg item -> Config msg item

Add classes to an individual selected item

Select.withMultiInputItemClass "bg-white" config

withMultiInputItemStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to an individual selected item

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

Configure the input control

This is the container that wraps the entire select view

withInputControlClass : String -> Config msg item -> Config msg item

Add classes to the input control

Select.withInputControlClass "control-class" config

withInputControlStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the input control

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

Configure the input wapper

This is the element that wraps the selected item(s) and the input

withInputWrapperClass : String -> Config msg item -> Config msg item

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

Select.withInputWrapperClass "col-12" config

withInputWrapperStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the input wrapper

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

Configure the input

withInputId : String -> Config msg item -> Config msg item

Set the ID of the input

Select.withInputId "input-id" config

withInputClass : String -> Config msg item -> Config msg item

Add classes to the input

Select.withInputClass "col-12" config

withInputStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the input

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

withOnFocus : msg -> Config msg item -> Config msg item

Add a callback for when the input field receives focus

Select.withOnFocus OnFocus

Configure the clear button

withClear : Bool -> Config msg item -> Config msg item

Remove the clear button entirely

Select.withClear False

withClearClass : String -> Config msg item -> Config msg item

Add classes to the clear button

Select.withClearClass "clear" config

withClearStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the clear button

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

withClearSvgClass : String -> Config msg item -> Config msg item

Add classes to the clear SVG icon

Select.withClearSvgClass "clear" config

Configure an underline element under the input

withUnderlineClass : String -> Config msg item -> Config msg item

Add classes to the underline div

Select.withUnderlineClass "underline" config

withUnderlineStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the underline div

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

Configure the items

withItemClass : String -> Config msg item -> Config msg item

Add classes to the items

Select.withItemClass "border-bottom" config

withItemStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the items

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

withItemHtml : (item -> Html Never) -> Config msg item -> Config msg item

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.

withHighlightedItemClass : String -> Config msg item -> Config msg item

Class for the hightlighted tem

Select.withHighlightedItemClass "red" config

withHighlightedItemStyles : List ( String, String ) -> Config msg item -> Config msg item

Styles for the highlighted item

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

withMenuClass : String -> Config msg item -> Config msg item

Add classes to the menu

Select.withMenuClass "bg-white" config

withMenuStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to the menu

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

Configure the not found message

withNotFound : String -> Config msg item -> Config msg item

Text that will appear when no matches are found

Select.withNotFound "No matches" config

withNotFoundClass : String -> Config msg item -> Config msg item

Class for the not found message

Select.withNotFoundClass "red" config

withNotFoundShown : Bool -> Config msg item -> Config msg item

Hide menu when no matches found

Select.withNotFoundShown False config

withNotFoundStyles : List ( String, String ) -> Config msg item -> Config msg item

Styles for the not found message

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

Configure the prompt

withPrompt : String -> Config msg item -> Config msg item

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

Select.withPrompt "Select a movie" config

withPromptClass : String -> Config msg item -> Config msg item

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

withPromptStyles : List ( String, String ) -> Config msg item -> Config msg item

Add styles to prompt text

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

State

newState : String -> State

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

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

queryFromState : State -> Maybe String

Return the query string from the current state model

Select.queryFromState model.selectState

View

view : Config msg item -> State -> List item -> List item -> Html (Msg item)

Render the view

Select.view
    selectConfig
    model.selectState
    model.items
    selectedItems

Update

update : Config msg item -> Msg item -> State -> ( State, Cmd msg )

Update the component state

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

Modules

Select

abinayasudhir/elm-select/1.2.0