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.
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.
{ transform : Msg -> msg
, fetch : String -> Platform.Cmd.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.
init : String -> Autocomplete a
Initialize the component with an optional query
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
Opaque type for internal messages
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.