Autocomplete contains the main logic to handle auto-complete. The state and logic of Autocomplete should reside within your model. Please refer to our examples to see how it all linked up.
To render the Autocomplete, please refer to Autocomplete.View or Autocomplete.Styled.
Opaque type of Autocomplete internal msg
Record to hold the query and choices for your fetcher function.
type alias Choices a =
{ query : String
, choices : List a
, ignoreList : List a
}
fetcher : Autocomplete.Choices String -> Task String (Autocomplete.Choices String)
fetcher lastChoices =
let
dogs =
[ "Hunter"
, "Polo"
, "Loki"
, "Angel"
, "Scout"
, "Lexi"
, "Zara"
, "Maya"
, "Baby"
, "Bud"
, "Ella"
, "Ace"
, "Kahlua"
, "Jake"
, "Apollo"
, "Sammy"
, "Puppy"
, "Gucci"
, "Mac"
, "Belle"
]
insensitiveStringContains : String -> String -> Bool
insensitiveStringContains a b =
String.contains (String.toLower a) (String.toLower b)
choiceList : List String
choiceList =
if String.length lastChoices.query == 0 then
[]
else
List.filter (insensitiveStringContains lastChoices.query) dogs
in
Task.succeed { lastChoices | choices = choiceList }Record to expose common values of Autocomplete to be used for display
A useful union type for rendering the correct view for each state of Autocomplete
Initialize the Autocomplete state with your fetcher function
init : ( Model, Cmd Msg )
init =
( { -- Initialize the Autocomplete state
autocompleteState = Autocomplete.init { query = "", choices = [], ignoreList = [] } fetcher
, selectedValue = Nothing
}
, Cmd.none
)
fetcher : Autocomplete.Choices String -> Task String (Autocomplete.Choices String)
fetcher lastChoices =
let
dogs =
[ "Hunter"
, "Polo"
, "Loki"
, "Angel"
, "Scout"
, "Lexi"
, "Zara"
, "Maya"
, "Baby"
, "Bud"
, "Ella"
, "Ace"
, "Kahlua"
, "Jake"
, "Apollo"
, "Sammy"
, "Puppy"
, "Gucci"
, "Mac"
, "Belle"
]
insensitiveStringContains : String -> String -> Bool
insensitiveStringContains a b =
String.contains (String.toLower a) (String.toLower b)
choiceList : List String
choiceList =
if String.length lastChoices.query == 0 then
[]
else
List.filter (insensitiveStringContains lastChoices.query) dogs
in
Task.succeed { lastChoices | choices = choiceList }Updates the Autocomplete state
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
-- This is the main wire-up to pass Autocomplete Msg to Autocomplete state
OnAutocomplete autocompleteMsg ->
let
( newAutocompleteState, autoCompleteCmd ) =
Autocomplete.update autocompleteMsg model.autocompleteState
in
( { model | autocompleteState = newAutocompleteState }
, Cmd.map OnAutocomplete autoCompleteCmd
)
-- ...Reset the Autocomplete State
There are many scenarios Autocomplete can handle using the reset.
On selected value, display selectedValue but remove all choices:
Autocomplete.reset
{ query = Maybe.withDefault query selectedValue
, choices = []
, ignoreList = []
}
autocompleteStateOn selected multiple values, ignore selected values but still display the choices:
Autocomplete.reset
{ query = ""
, choices = Autocomplete.choices autocompleteState
, ignoreList = selectedValueList
}
autocompleteStateReturns the selectedValue
Returns the ViewState of the Autocomplete to render the view. Remember to attach Autocomplete events to your view! See Autocomplete.View
Returns the query of the Autocomplete
Returns the current list of choices
Returns the selected index of the Autocomplete
Helper function to calculate if an index is selected
renderChoice : (Int -> List (Attribute Msg)) -> Maybe Int -> Int -> String -> Html Msg
renderChoice events selectedIndex index s =
Html.div
(if Autocomplete.isSelected selectedIndex index then
Html.Attributes.style "backgroundColor" "#EEE" :: events index
else
Html.Attributes.style "backgroundColor" "#FFF" :: events index
)
[ Html.text s ]
Opaque type of Autocomplete state