榆树在用户输入时自动完成

Elm Autocomplete On User Input

本文关键字：输入 用户      更新时间：2023-09-26

我对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 事件属性执行此操作。侦听输入事件是很常见的，它为您提供的信息比单个按键事件更多：

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，因为它支持效果和任务。

上面的代码片段依赖于您最初发布的内容的其他一些更改，因此我发布了一个要点，其中包含一个可以插入 http://elm-lang.org/try 的工作示例。希望这有帮助！

相关文章：