Вяз фильтрует список с помощью входной строки - PullRequest
Новая
       44

Вяз фильтрует список с помощью входной строки

1 голос
/ 09 марта 2020

У меня есть модель 

   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)

Это мой рендеринг View 

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 <<< Пример вывода </p>

1 Ответ

3 голосов
/ 09 марта 2020

Ниже приведен пример изменения функции renderPosts с привязкой filteredDevices, показывающий, как можно применить фильтр: 

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