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

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
    }

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

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

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

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