A select component for multi selection with remote data.
Opaque type representing cases to be passed to SmartSelect.update
Instantiates and returns a smart select.
internalMsg takes a function that expects a SmartSelect.Msg and returns an externally defined msg.characterSearchThreshold takes an integer that specifies how many characters need to be typed before triggering the remote query.debounceDuration takes a float that specifies the duration in milliseconds between the last keypress and remote query being triggered.The smart select view for selecting multiple options at a time with local data.
optionLabelFn takes a function that expects an instance of the data being selected from and returns a string naming/labeling the instance, i.e. if it is a "Product" being selected, the label may be "Garden Hose".viewSelectedOptionFn takes a function that expects an instance of the data being selected from and returns html to render a selected option.The smart select view for selecting multiple options at a time with local data.
isDisabled takes a boolean that indicates whether or not the select can be opened.optionLabelFn takes a function that expects an instance of the data being selected from and returns a string naming/labeling the instance, i.e. if it is a "Product" being selected, the label may be "Garden Hose".optionDescriptionFn takes a function that expects an instance of the data being selected from and returns a string describing the instance, i.e. if the label is "Garden Hose", the description may be "30 ft".viewSelectedOptionFn takes a function that expects and instance of the data being selected from and returns html to render a selected option.optionsContainerMaxHeight takes a float that specifies the max height of the container of the selectable options.spinnerColor takes a Color for the loading spinner.selectTitle takes a string to label the select in its closed state and non-selected state.characterThresholdPrompt takes a function that expects an int and returns a string indicating how many more characters need to be entered to trigger the query.queryErrorMsg takes a string to indicate that an error has occured while querying data.noResultsForMsg takes a function that expects a string and returns a message indicating that the search for the provided string returned no results.noOptionsMsg takes a string to indicate that no options exist in the select.import MultiSelectRemote
import Html exposing (Html)
import Color
type Msg
= ...
type alias Product =
{ name : String
, description : String
, price : Float
}
type alias Model =
{ ...
, select : MultiSelectRemote.SmartSelect Msg Product
}
viewSelectedProduct : Product -> Html Msg
viewSelectedProduct product =
div []
[ text (product.name ++ " - " ++ ("$" ++ String.fromFloat product.price)) ]
viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
MultiSelectRemote.viewCustom
{ isDisabled = False
, optionLabelFn = .name
, optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
, viewSelectedOptionFn = viewSelecteProduct
, optionsContainerMaxHeight = 500
, spinnerColor = Color.rgb255 0 0 0
, selectTitle = "Select a Product"
, characterThresholdPrompt =
\difference ->
if difference > 1 then
"Please enter " ++ String.fromInt difference ++ " more characters to search for a Product"
else if difference == 1 then
"Please enter 1 more character to search for a Product"
else
""
, queryErrorMsg = "An error occured while querying Products"
, noResultsForMsg = \searchText -> "No results found for: " ++ searchText
, noOptionsMsg = "There are no options to select"
}Events external to the smart select to which it is subscribed.
Update the provided smart select and receive the updated select instance and a cmd to run.
type alias RemoteSearchAttrs a =
{ headers : List Header
, url : String -> String
, optionDecoder : Decoder a
}Get the currently selected entities if any.
It is possible that the select is instantiated on your model before data representing a previous selection is loaded. Use this function to update the picked selection in the select when the appropriate data is received.
The opaque type representing a particular smart select instance.