Elm使用输入字符串过滤列表

Question

我有模特

   type alias Model =
    { 
      url : String
    , devices : List Device
    , input : String
    , isFilter : Bool
    , deviceSuggestion : Maybe Device
    }

type alias Device =
    { 
      status : String
    , license_plate : String
    , device_id : String
    }

这是我更新数据的方式，但是我不知道在搜索框中输入内容后如何进行过滤

update msg model =
case msg of
    GotResult result ->
        case result of
            Ok devices ->
                ( { model | devices = devices }, portDevice devices )

            Err devices ->
                ( { model | error = Just "Error" }, Cmd.none )

    Tick _ ->
        ( model, fetchUrl )

    InputChange newInput ->
         ( { model | input = newInput //function filter here?}, Cmd.none)

    SearchFunction ->
        ({ model | input = "" }, toJS model.input)

这是我的渲染视图

renderPosts : Model -> Html Msg
    renderPosts model =
    div []
        [ h3 [] [ text "Filter List" ] ,
        , input [ type_ "text"
                , placeholder "Searching for devices"
                , onInput InputChange
                , value model.input
                , id "inputDevices"
                ] []
         --, checkListFunction model //check and filter list function here as well?
         , button [ onClick SearchFunction , id "searchDevice"] [ text "Search" ]
         ,
            div []
            ([ text "Device List" ] ++ List.map (\device -> renderPost device) model.devices) //display function
            ]

我希望输出就像当我在搜索框中键入1234时，它会检测并过滤下面的列表，并在设备列表中使用license_plate。

**我尝试了list.filter，但它允许将列表与列表进行比较。**我尝试过String.contains，但是我需要2个字符串。由于输入框为String且license_plate为List]，因此出现错误

任何帮助都值得赞赏...https://www.w3schools.com/howto/howto_js_filter_lists.asp<<

我有模型类型别名Model = {url：字符串，设备：列表设备，输入：String，isFilter：Bool，deviceSuggestion：也许是设备}类型别名Device = ...

Answer 1

下面是使用renderPosts绑定修改filteredDevices函数的示例，显示了如何应用过滤器：