我对 Elm 很陌生。我在网页上有一个输入字段。当用户在输入字段中键入时,我想查询单词列表(存储在initialModel中)并根据在输入字段中键入的内容给出完成建议。我想我需要 Html.Events 来按键,所以我已经导入了它。我知道我还需要一个更新函数,所以我包含了一个空函数。这是我到目前为止的代码。提前致谢。
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp.Simple as StartApp
-- MODEL
type alias Model =
{
words: List String
}
initialModel : Model
initialModel =
{
words =
[ "chair", "sofa", "table", "stove", "cabinet", "tv", "rug", "radio", "stereo" ]
}
-- UPDATE
update =
{
}
-- VIEW
title : String -> Html
title message =
message
|> Html.text
pageHeader : Html
pageHeader =
h1
[ ]
[ title "Hello" ]
pageFooter : Html
pageFooter =
footer
[ ]
[ a [ href "#" ]
[ text "Hello" ]
]
inputField : Html
inputField =
input
[ type' "text" ]
[ ]
view : Html
view =
div
[ id "container" ]
[ pageHeader
, inputField
, pageFooter
]
-- BRING MODEL, VIEW AND UPDATE TOGETHER
main =
view
-- StartApp.start
-- {
-- model = initialModel
-- , view = view
-- , update = update
-- }
最佳答案
您的模型需要跟踪文本框的当前值。您可以首先创建一个在 update
函数期间更新 model.value 的 SetValue
操作:
type alias Model =
{ value : String
, words : List String
}
initialModel : Model
initialModel =
{ value = ""
, words =
[ "chair", "sofa", "table", "stove", "cabinet", "tv", "rug", "radio", "stereo" ]
}
type Action
= SetValue String
update action model =
case action of
SetValue value ->
{ model | value = value }
您还需要在该文本框中输入内容时触发更新功能。您可以使用 on
event attribute 来执行此操作。监听 input 事件是很常见的,它为您提供比单个按键事件更多的信息:
inputField : Address Action -> Html
inputField address =
input
[ type' "text"
, on "input" targetValue (Signal.message address << SetValue)
]
[ ]
最后,您需要显示一个包含自动完成内容的 div:
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
]
如果您决定变得更复杂并需要外部源来自动完成,则需要切换到 StartApp而不是 StartApp.Simple,因为它支持效果和任务。
上面的代码片段依赖于对您最初发布的内容进行的一些其他更改,因此我发布了 gist with a working example您可以插入 http://elm-lang.org/try 。希望这有帮助!
关于javascript - Elm 根据用户输入自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35093397/