a lot of progress on typeaheads, etc.

src/cljs/auto_ap/views/components/typeahead.cljs

@@ -0,0 +1,63 @@
+(ns auto-ap.views.components.typeahead
+  (:require [reagent.core :as r]
+            [clojure.string :as str]))
+
+(defn typeahead [{:keys [matches on-change field value]}]
+  (let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
+        highlighted (r/atom 0)
+        selected (r/atom (first (first (filter #(= (first %) value) matches))))
+        select (fn [[id t]]
+                 (reset! selected id)
+                 (reset! text t)
+                 (println [id t])
+                 (when on-change
+                   (on-change id)))]
+    (fn [{:keys [matches on-change field value]}]
+      (let [valid-matches (take 5 (for [[[id t :as match] i] (map vector  matches (range))
+                                        :when (str/includes? (.toLowerCase t) (.toLowerCase @text))]
+                                    match))]
+        [:div.typeahead
+         (if @selected
+           [:div.input
+            [:div.control
+             [:div.tags.has-addons
+              [:span.tag @text]
+              [:a.tag.is-delete {:on-click (fn [] (select [nil ""]))}]]]]
+           
+           [:input.input {:type "text"
+                          :field [:vendor]
+                          :value @text
+                          :on-blur (fn [e]
+                                     (cond @selected
+                                           nil 
+
+                                           (#{"" nil} @text)
+                                           nil
+
+                                           (seq valid-matches)
+                                           (do (select (first valid-matches))
+                                               true)
+
+                                           :else
+                                           (do (select [nil ""])
+                                               true)))
+                          :on-key-up (fn [e]
+                                       (if (= 13 (.-keyCode e))
+                                         (do
+                                           (select (first valid-matches))
+                                           false)
+                                         true))
+                          :on-change (fn [e]
+                                       (reset! highlighted (ffirst valid-matches))
+                                       (select [nil (.. e -target -value)]))}
+            ])
+         (when (and (seq @text)
+                    (not @selected)
+                    (seq valid-matches))
+           [:div.typeahead-menu
+            [:ul
+             (for [[id t :as match] valid-matches]
+
+               [:li.typeahead-suggestion {:class (if (= id @highlighted)
+                                                   "typeahead-highlighted")
+                                          :on-mouse-down #(do (println "MATCH" match) (select match))} t])]])]))))