specialelektronik/elm-autocomplete/1.0.0

Formerly special-elektronik/elm-autocomplete. Search finds this package by either name.

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

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 -> Cmd msg
, submit : String -> msg
, chose : a -> msg
, focus : msg
}

The Autocomplete needs a config:

  • transform: Into what Msg should be encode all internal autocomplete messages to?

  • fetch: The autocomplete let your application handle the fetching of suggestions. Supply a function that takes a string and returns a Command. To store the suggestions, call setSuggestions when the command completes with an OK.

  • submit: The message that will be triggered when the user submits a query. Perhaps you want to send the user to a search result page? This does not means that there is a matching suggestion. Imagine the user enters "Karls" and the suggestions return "Karlstad" and "Karlshamn" but the user really want to search for "Karlslund"

  • chose: The message that will be triggered when the user chooses a suggestion

  • focus: The message what will be triggered when the user focuses in the input element.

Initialize

init : String -> Autocomplete a

Initialize the component with an optional query

Update

Config a msg
-> Msg
-> { newAutocomplete : Autocomplete a
, maybeMsg : Maybe msg
, 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.

Update the component with your suggestions

type Msg

Opaque type for internal messages

View

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

View the input tag

-> { query : String
, suggestions : List a
, index : Maybe Int
}

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