Elm Autocomplete

Per discussion in #37, this library will be moved into elm-menu (Since it's really just a menu currently). The AccessibleExample (with a simple API and included input field) will be the mostly drop-in solution for this library. If you want to build more complicated features (like mentions), use elm-menu after the work is done porting it! Meanwhile, you'll have to copy/paste the example... obviously not ideal! The motivation here: no one wants to have 300 lines of boilerplate for the common case of a typical form autocomplete!

Demo

Checkout the landing page inspired by React Autosuggest's page design

Autocomplete menus have just enough functionality to be tedious to implement again and again. This is a flexible library for handling the needs of many different autocompletes.

Your data is stored separately; keep it in whatever shape makes the most sense for your application.

Make an issue if this library cannot handle your scenario and we'll investigate together if it makes sense in the larger context!

I recommend looking at the examples before diving into the API or source code!

Usage Rules

• Always put Autocomplete.State in your model.
• Never put any Config in your model.

Design inspired by elm-sortable-table.

Read about why these usage rules are good rules here.

The API Design Session video w/ Evan Czaplicki (@evancz) that brought us to this API.

Installation

elm-package install thebritican/elm-autocomplete

Setup

import Autocomplete


type alias Model =
  { autoState : Autocomplete.State -- Own the State of the menu in your model
  , query : String -- Perhaps you want to filter by a string?
  , people : List Person -- The data you want to list and filter
  }

-- Let's filter the data however we want
acceptablePeople : String -> List Person -> List Person
acceptablePeople query people =
  let
      lowerQuery =
          String.toLower query
  in
      List.filter (String.contains lowerQuery << String.toLower << .name) people

-- Set up what will happen with your menu updates
updateConfig : Autocomplete.UpdateConfig Msg Person
updateConfig =
    Autocomplete.updateConfig
        { toId = .name
        , onKeyDown =
            \code maybeId ->
                if code == 13 then
                    Maybe.map SelectPerson maybeId
                else
                    Nothing
        , onTooLow = Nothing
        , onTooHigh = Nothing
        , onMouseEnter = \_ -> Nothing
        , onMouseLeave = \_ -> Nothing
        , onMouseClick = \id -> Just <| SelectPerson id
        , separateSelections = False
        }

type Msg
  = SetAutocompleteState Autocomplete.Msg

update : Msg -> Model -> Model
update msg { autoState, query, people, howManyToShow } =
  case msg of
    SetAutocompleteState autoMsg ->
      let
        (newState, maybeMsg) =
          Autocomplete.update updateConfig autoMsg howManyToShow autoState (acceptablePeople query people)
      in
        { model | autoState = newState }

-- setup for your autocomplete view
viewConfig : Autocomplete.ViewConfig Person
viewConfig =
  let
    customizedLi keySelected mouseSelected person =
      { attributes = [ classList [ ("autocomplete-item", True), ("is-selected", keySelected || mouseSelected) ] ]
      , children = [ Html.text person.name ]
      }
  in
    Autocomplete.viewConfig
      { toId = .name
      , ul = [ class "autocomplete-list" ] -- set classes for your list
      , li = customizedLi -- given selection states and a person, create some Html!
      }

-- and let's show it! (See an example for the full code snippet)
view : Model -> Html Msg
view { autoState, query, people } =
  div []
      [ input [ onInput SetQuery ] []
      , Html.App.map SetAutocompleteState (Autocomplete.view viewConfig 5 autoState (acceptablePeople query people))
      ]