special-elektronik / elm-autocomplete / Autocomplete

An opinionated autocomplete component that fits our needs. It's broken into its own package because we need to use it in multiple applications. The autocomplete waits for at least 3 characters and 200 milliseconds before any command is triggered.

State


type Autocomplete a

The components internal state, the parameter a is the type of suggestions that you would like the autocomplete to return. It could be as simple as a string och any other type you'd like.


type alias Config a msg =
{ transform : Msg -> msg
, fetch : String -> Platform.Cmd.Cmd msg
, submit : String -> msg
, chose : a -> msg
, focus : msg 
}

The Autocomplete needs a config:

Initialize

init : String -> Autocomplete a

Initialize the component with an optional query

Update

update : Config a msg -> Msg -> Autocomplete a -> { newAutocomplete : Autocomplete a, maybeMsg : Maybe msg, cmd : Platform.Cmd.Cmd msg }

Update the Autocomplete and optionally return a Msg that the parent function should issue.

NOTE: If the maybeMsg is Just, than the cmd must be Cmd.none and ignored by the parent function.

setSuggestions : List a -> Autocomplete a -> Autocomplete a

Update the component with your suggestions


type Msg

Opaque type for internal messages

View

input : Config a msg -> List (Html.Attribute Basics.Never) -> Autocomplete a -> Html msg

View the input tag

toView : Autocomplete a -> { query : String, suggestions : List a, index : Maybe Basics.Int }

Retrieve values intented for the view. The index field potentially holds the index of the selected suggestion.