1

I have a search-form that searches some text for me. When I type in the input box I have to manually press a button for it to search. Is there a way for me to hit enter on the keyboard and have that search, as well as the button?

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

This is the code I currently have. As you can see, to call the search-function I have to click on the button. I would like to be able to press enter and also have the ability to press the button and both will call search-function

Any help would be much appreciated. Thanks

rbb
  • 919
  • 6
  • 14
  • 3
    i guess if you put your outer div into the `:form` tag, you will be able to listen to its `onSubmit` event, and do whatever you need. – leetwinski Mar 15 '17 at 11:56

1 Answers1

0

You might try something like :on-key-down for the event, and I think you are looking for the number 13. Ran across it when I was reading the source code for reagent-forms though I am not sure where the documentation would be.

Closest documentation that I could find is here, though React tests for the Enter key explicitly here.

nrako
  • 2,487
  • 12
  • 26