У меня есть html-страница, содержащая панель навигации в верхней части экрана. На панели навигации у меня есть окно поиска, и я хочу, чтобы вы вводили это поле, нажимали Enter, и результаты отображались в виде раскрывающегося меню.
<li><input type="text" id="search-bar" placeholder="Search"></li>
Это поле ввода html-поиска. Я дал ему идентификатор 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.
Я хочу, чтобы это произошло, когда вы вводите поле ввода на панели навигации (скажите «привет», он вызывает search-index из формы поиска с параметром, являющимся значением, которое вы вводите («привет»), а затем возвращает результаты как выпадающее меню ниже.
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])
Любая помощь приветствуется.
