Html ClojureScript下拉菜单

我有一个html页面，在屏幕顶部有一个导航栏。在导航栏中，我有一个搜索框，我想让它做的是，你在这个框中键入，点击回车键，结果显示为下拉菜单

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

目前我有一个如下的搜索表单

(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])

这是我的

搜索组件

我想做的是，当你在导航栏上的输入框中输入时（说“你好”，它从搜索表单调用

搜索索引

，参数是你输入的值（“你好”），然后以下拉菜单的形式返回结果

搜索表单

现在作为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])

任何帮助都将不胜感激。

提供了一个解决方案。看起来您正在使用试剂，所以您可以直接使用它，否则您可以将其用作灵感

(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])