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
{ onSelect : Maybe item -> msg
, toLabel : item -> String
, filter : String -> List item -> Maybe (List item)
}
Required initial configuration
Opaque type that holds all the configuration
Opaque type that holds the current state
Opaque type for internal library messages
newConfig : RequiredConfig msg item -> Config msg item
Create a new configuration. This takes as RequiredConfig
record.
withCutoff : Basics.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 : Basics.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 : Basics.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
withMaxLength : Basics.Int -> Config msg item -> Config msg item
Add a maximum length to the query Input field
Select.withMaxLength 50
withMultiSelection : Basics.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
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
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
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
withClear : Basics.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
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
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 Basics.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
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 : Basics.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
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
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 : Config msg item -> State -> List item -> List item -> Html (Msg item)
Render the view
Select.view
selectConfig
model.selectState
model.items
selectedItems
update : Config msg item -> Msg item -> State -> ( State, Platform.Cmd.Cmd msg )
Update the component state
SelectMsg subMsg ->
let
( updated, cmd ) =
Select.update selectConfig subMsg model.selectState
in
( { model | selectState = updated }, cmd )