bluedogtraining / bdt-elm / Form.SearchSelect

This module is useful if you want to add a Select Form element to your app, with the options being searchable and coming from the backend.

Initialise and update


type Model option

Add a SearchSelect.Model to your model.

type alias MyModel =
    { mySearchSelect : SearchSelect.Model String
    }

init : String -> Json.Decode.Decoder option -> Model option

Init a SearchSelect.Model in your model.

  myInitialModel : MyModel
  myInitialModel =
      { mySearchSelect = SearchSelect.init "https://example.com/search" Decode.string
      }


type alias Msg option =
Internal.Msg option

Add a SearchSelect.Msg to your Msg.

type MyMsg
    = UpdateMySearchSelect SearchSelect.Msg

update : Msg option -> Model option -> ( Model option, Platform.Cmd.Cmd (Msg option) )

Use in your update function.

myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
    case msg of
        UpdateMySearchSelect selectMsg ->
            let
                ( newSelect, cmd ) =
                    SearchSelect.update selectMsg mode.mySearchSelect
            in
            { model | mySearchSelect = newSelect } ! [ cmd ]

View and render

view : (option -> String) -> Model option -> View option

Transform an SearchSelect.Model into an SearchSelect.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ model.mySearchSelect
            |> SearchSelect.view .name

        -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

render : View option -> Html.Styled.Html (Msg option)

Transforms an SearchSelect.View into Html SearchSelect.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ SearchSelect.view model.mySearchSelect .name
            |> SearchSelect.render
            |> Html.map UpdateMySearchSelect
        ]

State Setters

reInitialise : Model option -> Model option

ReInitialise your SearchSelect.Model.

reset : Model option -> Model option

Reset your SearchSelect.Model.

setInitialOption : Maybe option -> Model option -> Model option

Set the initial option of your SearchSelect.Model.

setSelectedOption : Maybe option -> Model option -> Model option

Change the option of your SearchSelect.Model.

setIsOptionDisabled : (option -> Basics.Bool) -> View option -> View option

This function allows you to disable specific options.

View Setters

setIsError : Basics.Bool -> View option -> View option

Set whether your search-select is in error mode (red border).

setIsLocked : Basics.Bool -> View option -> View option

Set whether your search-select is locked (disabled).

setIsClearable : Basics.Bool -> View option -> View option

Set whether your search-select is clearable (x icon).

setDefaultLabel : String -> View option -> View option

Set the default label, for example (-- NOTHING SELECTED --).

setId : String -> View option -> View option

Give your search-select an id. Can be useful for DOM selectors (focus, WebComponents etc.)

Getters

getIsChanged : Model option -> Basics.Bool

Whether your search-select was changed. Useful if you want to disable save buttons unless there were changes etc.

getIsOpen : Model option -> Basics.Bool

Whether this select is currently open.

getInitialOption : Model option -> Maybe option

Get the initial option of your search-select.

getSelectedOption : Model option -> Maybe option

Get the current option of your search-select. This is what you'd use to display the data somewhere outside of your search-select, or to send the data to the backend for example etc.

getId : View option -> Maybe String

Useful if you need the id of the search select in your update function, to set focus etc.