Select

Simple elm search/select input with debouncer

This is in Alpha and is currently not intended for external use (yet).

Currently working on stylings (elm-css or supply your own css)

See a full example of the select input here

Types

type alias Item item =

{ id : String

, label : String

, identity : item

, isSelectable : Bool

}

An item for selection

type alias Model item msg =

{ label : String

, selected : Maybe (Item item)

, toItem : item -> Item item

, search : Search item msg

, mode : OpenState

, autocompleteIndex : Maybe Int

, minimumSearchTermsLength : Int

, maximumSearchResults : Maybe Int

, showClearButton : Bool

}

Select Input configuration model

type Msg item msg

= Autocomplete

| Clear

| Set (Setters item msg)

| RunSearch

| EmitMsg msg

| QueueSearch (Msg (Msg item msg))

| NoOp

Select Input messages

type OpenState

= Opened

| Closed

Dropdown open state

type alias Search item msg =

{ filters : Filters item msg

, terms : Maybe String

, items : List (Item item)

, results : WebData (Items item)

, query : SearchQuery item msg

, debouncer : Debouncer (Msg item msg) (Msg item msg)

}

Select input's search configuration

type Setters item msg

= Mode OpenState

| Select (Item item)

| Deselect (Item item)

| AutocompleteIndex Direction

| SearchTerms String

| SearchResults (WebData (Items item))

| SelectFilter (Filter item msg)

Select Input internal state setters

type Filter item msg

= CustomFilter (Html (Msg item msg))

Filter - bring your own with parent msg. Others to come.

type ParentMsg item msg

= SelectedItem (Item item)

| ParentMsg msg

| NoChange

Return msgs for your application to respond to

type SearchQuery item msg

= BasicQuery

| HttpQuery (Maybe String -> Request item)

| CustomQuery (CustomSearch item msg)

Select input's search query

Basic will search label fields on items
HttpQuery provide a req and decoder and it will update details
CustomQuery -> As it sounds

Configuration

init : String -> (item -> Item item) -> Model item msg

Minimum model creation. This will be split out into 'RequiredModel' in future

addFilter : Filter item msg -> Model item msg -> Model item msg

Initialise select input with a filter

  basicInit yourArgs
  |> addFilter (Select.CustomFilter yourView)

addSearchQuery : SearchQuery item msg -> Model item msg -> Model item msg

Add a SearchQuery for usage when search input changes

addDebounceInterval : Int -> Model item msg -> Model item msg

Add a SearchQuery for usage when search input changes

addItems : List (Item item) -> Model item msg -> Model item msg

Add initial list of items

addSelectedItem : Item item -> Model item msg -> Model item msg

Add initially selected item

addClearButton : Bool -> Model item msg -> Model item msg

Config change to display (or not) the clear button. Default is True

addMaxSearchResults : Maybe Int -> Model item msg -> Model item msg

Config change to min length of search terms Default is 0

addMinSearchTerms : Int -> Model item msg -> Model item msg

Config change to min search results before running query Default is 0

Usage

update : Msg item msg -> Model item msg -> Return item msg

Update function in future it will have a third el to its tuple for synchronisation

view : Model item msg -> Html (Msg item msg)

Display search input and results

isOpen : Model item msg -> Bool

Check if selector is open or not

Modules

Select

o-train/elm-search-input/2.0.1

Select

Types

Configuration

Usage

Modules