re-frame typeahead attempt from reagent-forms

handlers.cljs

(ns kulive.handlers
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]
            [kulive.db :as db]))
            
(defn set-typeahead-hidden
  [db [_ bool]]
  (assoc-in db [:typeahead :hidden?] bool))

(re-frame/register-handler :set-typeahead-hidden set-typeahead-hidden)

(defn set-typeahead-selected-index
  [db [_ ind]]
  (assoc-in db [:typeahead :selected-index] ind))

(re-frame/register-handler :set-typeahead-selected-index set-typeahead-selected-index)

(defn set-typeahead-selections
  [db [_ data-source]]
  (assoc-in db [:typeahead :selections] data-source))

(re-frame/register-handler :set-typeahead-selections set-typeahead-selections)

(defn set-typeahead-value
  [db [_ val]]
  (assoc-in db [:typeahead :value] val))

(re-frame/register-handler :set-typeahead-value set-typeahead-value)

(defn set-mouse-on-list
  [db [_ bool]]
  (assoc-in db [:typeahead :mouse-on-list?] bool))

(re-frame/register-handler :set-mouse-on-list set-mouse-on-list)

subs.cljs

(ns kulive.subs
  (:require-macros [reagent.ratom :refer [reaction]])
  (:require [clojure.string :as str]
            [reagent.core :as reagent]
            [re-frame.core :as rf]))

(rf/register-sub
 :typeahead-db
 (fn [db]
   (reaction (:typeahead @db))))

views.cljs

(ns kulive.views
  (:require [re-frame.core :as rf]
            [kulive.subs]
            [kulive.handlers])
  (:require-macros [reagent.ratom :refer [reaction]]))

(defn typeahead []
  (let [typeahead-db (rf/subscribe [:typeahead-db])
        data-source (reaction
                     (filter
                      #(-> %
                           (.toLowerCase)
                           (.indexOf (get-in @typeahead-db [:input]))
                           (> -1))
                      ["Alice" "Alan" "Bob" "Beth" "Jim" "Jane" "Kim" "Rob" "Zoe"]))
        selected-index (reaction (:selected-index @typeahead-db))
        selections (reaction (:selections @typeahead-db))
        value (reaction (:value @typeahead-db))
        typeahead-hidden? (reaction (:hidden @typeahead-db))]
    (fn []
      [:div
       [:input {:type "text"
                :value @value
                :on-blur #(when-not (reaction (:mouse-on-list? @typeahead-db))
                            (rf/dispatch [:set-typeahead-hidden true])
                            (rf/dispatch [:set-typeahead-selected-index 0]))
                :on-change #(do
                              (rf/dispatch [:set-typeahead-selections @data-source])
                              (rf/dispatch [:set-typeahead-value (value-of %)])
                              (rf/dispatch [:set-typeahead-hidden false])
                              (rf/dispatch [:set-typeahead-selected-index 0]))
                :on-key-down #(do
                                (case (.-which %)
                                  38 (do
                                       (.preventDefault %)
                                       (if-not (= 0 @selected-index)
                                         (rf/dispatch [:set-typeahead-selected-index
                                                       (- @selected-index 1)])))
                                  40 (do
                                       (.preventDefault %)
                                       (if-not
                                           (= @selected-index (- (count @selections) 1))
                                         (rf/dispatch [:set-typeahead-selected-index
                                                       (+ @selected-index 1)])))
                                  13 (do (rf/dispatch [:set-typeahead-value
                                                       (nth @selections @selected-index)])
                                         (rf/dispatch [:set-typeahead-hidden true]))
                                  27 (do (rf/dispatch [:set-typeahead-hidden true])
                                         (rf/dispatch [:set-typeahead-selected-index 0]))
                                  "default"))}]
       [:ul {:hidden (or (empty? @selections) (@typeahead-hidden?))
             :class "typeahead-list"
             :on-mouse-enter (rf/dispatch [:set-mouse-on-list true])
             :on-mouse-leave (rf/dispatch [:set-mouse-on-list false])}
        (doall
         (map-indexed
          (fn [index result]
            [:li {:tab-index index
                  :key index
                  :class (if (= @selected-index index) "highlighted" "typeahead-item")
                  :on-mouse-over #(do
                                    (reset! selected-index (js/parseInt (.getAttribute (.-target %) "tabIndex"))))
                  :on-click #(do
                               (rf/dispatch [:set-typeahead-hidden true])
                               (rf/dispatch [:set-typeahead-value result]))} result])
          @selections))]])))