The opaque type representing a particular smart select instance.

Opaque type representing cases to be passed to MultiSelect.update

Instantiates and returns a smart select.

• selectionMsg takes a function that expects a tuple representing the list of selections and a MultiSelect.Msg and returns an externally defined msg for handling selection.
• internalMsg takes a function that expects a MultiSelect.Msg and returns an externally defined msg for handling the update of the select.
• idPrefix takes a string with a unique prefix

The smart select view for selecting multiple options at a time with local data.

• selected takes a list of the currently selected entities.
• options takes a list of the data being selected from.
• 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 and 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.
• selected takes a list of the currently selected entities.
• options takes a list of the data being selected from.
• 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 an 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.
• searchFn takes a function that expects the search text and the items to search and returns the filtered items.
• selectTitle takes a string to label the select in its closed state and non-selected state.
• 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 Html exposing (Html, div)
import MultiSelect

type Msg
    = HandleSelectUpdate (MultiSelect.Msg Product)
    | HandleSelection ( List Product, MultiSelect.Msg Product )

type alias Product =
    { name : String
    , description : String
    , price : Float
    }

init : () -> ( Model, Cmd Msg )
init _ =
    ( { products = exampleProducts
      , select =
            MultiSelect.init
                { selectionMsg = HandleSelection
                , internalMsg = HandleSelectUpdate
                }
      , selectedProduct = Nothing
      }
    , Cmd.none
    )

type alias Model =
    { products : List Product
    , select : MultiSelect.SmartSelect Msg Product
    , selectedProducts : List Product
    }

viewSelectedProduct : Product -> Html Msg
viewSelectedProduct product =
    div []
        [ text (product.name ++ " - " ++ ("$" ++ String.fromFloat product.price)) ]

viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
    MultiSelect.viewCustom
        { isDisabled = False
        , selected = model.selectedProducts
        , options = model.products
        , optionLabelFn = .name
        , optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
        , viewSelectedOptionFn = viewSelectedProduct
        , optionsContainerMaxHeight = 500
        , searchFn =
            \searchText allOptions ->
                List.filter
                    (\option ->
                        String.contains (String.toLower searchText) (String.toLower option.name)
                            || String.contains (String.toLower searchText) (String.toLower option.description)
                    )
                    allOptions
        , selectTitle = "Select a Product"
        , noResultsForMsg = \searchText -> "No results found for: " ++ searchText
        , noOptionsMsg = "There are no options to select"
        }
        model.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.