-
-
Save hansv/66c1afe7927927f48360ce9c5b90be5b to your computer and use it in GitHub Desktop.
Updated Autocomplete example to Elm 0.17
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Html exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| import Html.App as Html | |
| import Task | |
| import Char | |
| import String exposing (..) | |
| type alias Model = | |
| { value : String | |
| , words : List String | |
| } | |
| initialModel : Model | |
| initialModel = | |
| { value = "" | |
| , words = | |
| [ "chair", "sofa", "table", "stove", "cabinet", "tv", "rug", "radio", "stereo" ] | |
| } | |
| main = | |
| Html.program | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = \_ -> Sub.none | |
| } | |
| title : String -> Html Msg | |
| title message = | |
| message | |
| |> Html.text | |
| pageHeader : Html Msg | |
| pageHeader = | |
| h1 | |
| [ ] | |
| [ title "Hello" ] | |
| pageFooter : Html Msg | |
| pageFooter = | |
| footer | |
| [ ] | |
| [ a [ href "#" ] | |
| [ text "Hello" ] | |
| ] | |
| inputField = | |
| input | |
| [ type' "text" | |
| , onInput SetValue | |
| ] | |
| [ ] | |
| view : Model -> Html Msg | |
| view model = | |
| div | |
| [ id "container" ] | |
| [ pageHeader | |
| , inputField | |
| , autocomplete model | |
| , pageFooter | |
| ] | |
| autocomplete model = | |
| let | |
| matches = | |
| List.filter (startsWith model.value) model.words | |
| in | |
| div [] | |
| [ div [] [ text <| "Autocomplete input: " ++ model.value ] | |
| , div [] [ text "Autocomplete matches: " ] | |
| , div [] <| List.map (\w -> div [] [ text w ]) matches | |
| ] | |
| type Msg | |
| = SetValue String | |
| update msg model = | |
| case msg of | |
| SetValue value -> | |
| ( { model | value = value } | |
| , Cmd.none ) | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( initialModel | |
| , Cmd.none ) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment