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个字符串。它给出错误，因为输入框是字符串，license_plate是List

任何帮助都将不胜感激。。。https://www.w3schools.com/howto/howto_js_filter_lists.asp<lt<输出示例

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)
]