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.
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
}
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 : (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
]
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.
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.)
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.