ClojureScript下拉菜單

我有一個HTML頁面，其中包含一個導航欄在屏幕的頂部。在導航欄，我有一個搜索框，我想要它做的是，在此框中鍵入，按下回車鍵，結果顯示爲下拉菜單ClojureScript下拉菜單

<li><input type="text" id="search-bar" placeholder="Search"></li>

這是HTML搜索輸入框。我給它一個id search-bar在ClojureScript

(when-let [section (. js/document (getElementById "search-bar"))] 
       (r/render-component [search-bar-component] section))

最終創建下拉菜單目前，我有一個搜索形式，看起來像下面

(defn search-form 
    [] 
    [:div 
    [:p "What are you searching for? " 
    [:input 
    {:type :text 
     :name :search 
     :on-change #(do 
        (swap! fields assoc :search (-> % .-target .-value)) 
        (search-index (:search @fields))) 
     :value (:search @fields)}]] 
    [:p (create-links @search-results)]]) 

(defn- search-component 
    [] 
    [search-form])

這是我的search-component。

我想要發生的是當您在導航欄上輸入框（例如「hello」）時，它會從搜索表單中調用search-index，參數是您鍵入的值（「hello」），然後將結果作爲下面的下拉菜單返回

search-form現在作爲html頁面上的一個表單工作，其中您將一些文本輸入到表單中，然後將結果顯示在下面，我想將其更改爲導航欄，而不是作爲單獨的頁面，其中輸入窗體位於導航欄上，結果顯示在下方

如何更改我的搜索表單以便執行此操作？

我想我能做到沿着任何幫助將是非常讚賞的這

(defn search-bar-form 
     [] 
     [:div 
     [:input 
     {:type :text 
     :name :search 
     :on-change #(do 
         (swap! fields assoc :search (-> % .-target .-value)) 
         (search-index (:search @fields))) 
     :value (:search @fields)}] 
     [:p (create-links @search-results)]]) 

(defn- search-bar-component 
     [] 
     [search-form])

線的東西。

來源

2017-03-15 rbb

re-com提供了typeahead component。看起來你正在使用試劑，所以你可以使用它，否則你可以用它作爲靈感。

來源

2017-03-15 21:38:05

ClojureScript下拉菜單

回答

相關問題