MadonnaMat / elm-select-two / SelectTwo.Html

this file is for all things related to select2 in the view. this will build your html and has a few helpers for some other areas

Essentials

select2Css : Html msg

This is a stylesheet link tag to the select2 minified css, use this while developing, but it is more recommended that you use it in your head once you compile the code instead

select2 : (SelectTwo.Types.SelectTwoMsg msg -> msg) -> SelectTwo.Types.SelectTwoConfig msg -> Html msg

This the select2 dropdown itself, you pass it a sender and a config and you get back a select2 dropdown. Example:

let
    testList msg =
        [ ( Just "a", "a" )
        , ( Just "b", "b" )
        , ( Just "c", "c" )
        ]
            |> SelectTwo.basicSelectOptions msg
in
select2 SelectTwo
    { defaults = SelectTwo.defaultsFromList [ Test model.test ] <| testList Test
    , id_ = "test-1"
    , list = testList Test
    , clearMsg = Just (\_ -> Test Nothing)
    , width = "300px"
    , placeholder = "Select Test"
    , disabled = False
    , showSearch = True
    , multiSelect = False
    , ajax = False
    , delay = 0
    }

select2Dropdown : (SelectTwo.Types.SelectTwoMsg msg -> msg) -> Maybe (SelectTwo.Types.SelectTwoOption msg -> Maybe (Html msg)) -> SelectTwo.Types.Model b msg -> Html msg

The dropdown to be shown on the page, this needs to be placed somewhere on the bottome of the view The second option can be a custom html builder

select2Close : (SelectTwo.Types.SelectTwoMsg msg -> msg) -> Html.Attribute msg

This is an event you put on the body of your elm view, so when a user click away it closes the dropdown

Helpers

preventScrolling : List String -> SelectTwo.Types.Model b msg -> List ( String, String )

Select2 only works when a parent div is not scrollable, this makes divs not scrollable while the dropdown is open first argument is a list of select2 ids you don't want to scroll by

widthGuess : Basics.Float -> List (SelectTwo.Types.GroupSelectTwoOption msg) -> String

Use this helper method in the select2 config in order to get select2's width resolve functionality