Autocomplete widget in Elm

Code Examples

elm-package install thebritican/elm-autocomplete
import Autocomplete
import AutocompleteWrapper
type alias Model =
{ field1 : AutocompleteWrapper.Model
, field2 : AutocompleteWrapper.Model
, field3 : AutocompleteWrapper.Model
}
init : ( Model, Cmd Msg )
init =
( { field1 = AutocompleteWrapper.init "id1" "State" menuItems1
, field2 = AutocompleteWrapper.init "id2" "Language" menuItems2
, field3 = AutocompleteWrapper.init "id3" "Color" menuItems3
}
, Cmd.none
)
menuItems3 : List AutocompleteWrapper.MenuItem
menuItems3 =
[ "Blue"
, "Yellow"
, "Red"
, "Green"
]
type Msg
= OriginMessage String AutocompleteWrapper.Msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
let
msgConverter : Msg -> ( String, AutocompleteWrapper.Msg )
msgConverter msg =
case msg of
OriginMessage fieldId autocomMsg ->
( fieldId, autocomMsg )
in
case msg of
OriginMessage fieldId autocomMsg ->
if fieldId == model.field1.fieldId then
let
( newModel, newMsg ) =
AutocompleteWrapper.update autocomMsg
model.field1 OriginMessage msgConverter
in
{ model | field1 = newModel } ! [ newMsg ]
else if fieldId == model.field2.fieldId then
let
( newModel, newMsg ) =
AutocompleteWrapper.update autocomMsg
model.field2 OriginMessage msgConverter
in
{ model | field2 = newModel } ! [ newMsg ]
else if fieldId == model.field3.fieldId then
let
( newModel, newMsg ) =
AutocompleteWrapper.update autocomMsg
model.field3 OriginMessage msgConverter
in
{ model | field3 = newModel } ! [ newMsg ]
else
model ! []
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Sub.map (OriginMessage model.field1.fieldId <<
AutocompleteWrapper.SetAutoState) Autocomplete.subscription
, Sub.map (OriginMessage model.field2.fieldId <<
AutocompleteWrapper.SetAutoState) Autocomplete.subscription
, Sub.map (OriginMessage model.field3.fieldId <<
AutocompleteWrapper.SetAutoState) Autocomplete.subscription
]
view : Model -> Html Msg
view model =
div [ class "form-container" ]
[ div
[]
[ AutocompleteWrapper.view model.field1 OriginMessage
, AutocompleteWrapper.view model.field2 OriginMessage
, AutocompleteWrapper.view model.field3 OriginMessage
] ]
]
The changes in the model during the interaction
Chain of messages while the user is interacting with the page

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store