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 <<< 输出示例

Answer 1

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

renderPosts : Model -> Html Msg
renderPosts model =
    let
        filteredDevices =
            List.filter (\device => String.contains model.input device.license_plate) model.devices
    in
    div []
        [ h3 [] [ text "Filter List" ] ,
            ...
            div []
            ([ text "Device List" ] ++ List.map (\device -> renderPost device) filteredDevices)
            ]

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

Elm filter a list with input String

string

compare

list

filter

elm