June 4 2016 Reflex.Dom workshop (NY Haskell User's Group)

typeahead.hs

{-# LANGUAGE ScopedTypeVariables, RankNTypes #-}
import Reflex.Dom
import Data.Monoid ((<>))
import Data.List (isPrefixOf)

main :: IO ()
main = mainWidgetWithHead headTag bodyTag

headTag :: MonadWidget t m => m ()
headTag = elAttr "link" ("rel" =: "stylesheet" <> "href" =: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css") $ return ()

bodyTag :: forall t m. MonadWidget t m => m ()
bodyTag = divClass "jumbotron" $ do
  el "h1" $ text "Search!"
  t <- textInput $ def { _textInputConfig_attributes = constDyn ("class" =: "form-control") }
  let query :: Dynamic t String = _textInput_value t
  results :: Dynamic t [String] <- mapDyn (\q -> searchNames q listOfNames) query
  elClass "ul" "list-group" $
    simpleList results $ \v -> do
      elClass "li" "list-group-item" $
        dynText v
  return ()

searchNames :: String -> [String] -> [String]
searchNames query names = filter (\name -> query `isPrefixOf` name) names

{-
<ul class"list-group">
  <li class"list-groupītem">Cras justo odio</li>
-}


listOfNames :: [String]
listOfNames = [ "Amal Padula"
              , "Marco Schell"
              , "Thanh Mcglamery"
              , "Venus Gillooly"
              , "Elizbeth Dobyns"
              , "Jule Sutter"
              , "Noreen Rawley"
              , "Dreama Blanke"
              , "Stephen Diener"
              , "Suzanne Tumlinson"
              , "Adelaida Overton"
              , "Setsuko Stiner"
              , "Randi Pottinger"
              , "Kelsey Mccown"
              , "Abigail Clermont"
              , "Kenton Pfeiffer"
              , "Joan Levesque"
              , "Latoria Wehr"
              , "Taren Browning"
              , "Kali Marden"
              , "Sherell Lucey"
              , "Richard Pellegrin"
              , "Desire Teller"
              , "Nora Rubenstein"
              , "Flavia Stonesifer"
              , "Hwa Paquette"
              , "Antonina Toney"
              , "Roxanna Caudill"
              , "Katelin Ketchum"
              , "Cristie Delpino"
              , "Victorina Tolle"
              , "Dovie Umphrey"
              , "Tana Dearborn"
              , "Jeanette Yeh"
              , "Elenore Cutrer"
              , "Christin Buskey"
              , "Carolina Mullinax"
              , "Rachell Stepney"
              , "Melvin Herron"
              , "Holly Smits"
              , "Mathilda Nottingham"
              , "Samara Buster"
              , "Antony Derrico"
              , "Eliz Belnap"
              , "Elvin Eklund"
              , "Treena Raney"
              , "Dagny Singleterry"
              , "Kenda Pyatt"
              , "Tracie Demasi"
              , "Carson Virgen"
              ]

Live-coding workshop at the NY Haskell User's Group.

Goals:

• Use a CSS framework (Bootstrap, in this case)
• Build a simple typeahead search

Compiling this should result in a site that looks like this.

Warning: The search is case sensitive and only does a prefix search of the whole name string (rather than searching first and last names separately).