russelldavies / elm-ui-searchbox / SearchBox

Definitions

input : List (Element.Attribute msg) -> { onChange : ChangeEvent a -> msg, text : String, selected : Maybe a, options : Maybe (List a), label : Element.Input.Label msg, placeholder : Maybe (Element.Input.Placeholder msg), toLabel : a -> String, filter : String -> a -> Basics.Bool, state : State } -> Element msg

Use this in a similar way to Element.Input.text.

Note: Events.onClick, Events.onFocus and Events.onLoseFocus are used internally by the date picker. This means, that your own Events.onClick, Events.onFocus and Events.onLoseFocus attributes have no effect and will not fire.


type alias State =
{ hasFocus : Basics.Bool
, selectionIndex : Basics.Int
, loading : Basics.Bool 
}

The state of the searchbox


type ChangeEvent a
    = SelectionChanged a
    | TextChanged String
    | SearchBoxChanged Msg

This is the event that is the onChange wraps that you handle in your app's update function.


type Msg

Message for internal state changes.

Usage

To control the state transitions.

init : State

update : Msg -> State -> State

Called when you need to update the searchbox's internal state.

reset : State -> State

Reset the searchbox. You'll want to call this at various points in your workflow.

setLoading : State -> State

Show a loading icon. Useful if you are retrieving a list of options remotely.