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 =
            (testList Test)
                |> List.concatMap (\( _, l ) -> l)
                |> List.filter (\l -> (Just (Test model.test)) == (l |> Tuple4.first))
        , id_ = "test-1"
        , list = testList Test
        , parents = [ "parent" ]
        , clearMsg = Just (\_ -> Test Nothing)
        , width = "300px"
        , placeholder = "Select Test"
        , disabled = False
        , showSearch = True
        , multiSelect = False
        , url = Nothing
        , data = (\_ -> "")
        , processResults = (\( _, params ) -> ( [], params ))
        , delay = 0
        }

The dropdown to be shown on the page, this needs to be placed somewhere on the bottome of the view

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 parent divs not scrollable while the dropdown is open

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