Feature Request: search input field with auto-suggest on type event

[benjaminweb]

Which building blocks do we need to make this possible? It reduces navigation complexity quite significantly for a context I have at the moment. Currently, there is no event that is triggered on typing and returning the current input string.

[seanhess]

HTMX implements this by allowing an onInput event, but with a debounce: https://htmx.org/examples/active-search/

<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="input changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

This is very doable. We can add an onInput with a delay parameter. Users will probably attempt to use 0 at some point. Maybe we can throw a javascript error or warning and force a minimum of 50ms or something.

[seanhess]

Added a search input, which triggers an action on a debounced delay. It doesn't automatically make things selectable, but this should be very easy to do by making the results be buttons

data SearchAction = GoSearch Text
  deriving (Show, Read, ViewAction)

liveSearch :: LiveSearch -> SearchAction -> Eff es (View LiveSearch ())
liveSearch _ (GoSearch term) = do
  let matched = filter (isInfixOf (toLower term) . toLower) allLanguages
  pure $ liveSearchView matched

liveSearchView :: [Text] -> View LiveSearch ()
liveSearchView langs =
  col (gap 10) $ do
    search GoSearch 100 (placeholder "programming language" . border 1 . pad 10)
    resultsTable langs

See LiveSearch for the full example.