Hi Rickesh, it looks like you use reagent. I think the type-ahead functionality in reagent-forms is the simplest way to get that functionality.
https://github.com/reagent-project/reagent-forms#typeahead /Linus 2017-03-15 11:31 GMT+01:00 'Rickesh Bedia' via ClojureScript < [email protected]>: > I have a html page that contains a navigation bar at the top of the > screen. In the navigation bar, I have a search box and what I want it to do > is, you type in this box, hit enter and the results are displayed as a > dropdown menu > > <li><input type="text" id="search-bar" placeholder="Search"></li> > > This is the html search input box. I have given it an id `search-bar` to > eventually create the dropdown menu in ClojureScript > > (when-let [section (. js/document (getElementById "search-bar"))] > (r/render-component [search-bar-component] section)) > > Currently I have a search-form that looks like the following > > (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]) > > This is my `search-component`. > > What I want to happen is when you type in the input box on the navbar (say > "hello", it calls `search-index` from the search-form with the parameter > being the value you type in ("hello") and then returns the results as a > dropdown menu below. > > `search-form` works right now as a form on a html page, where you input > some text into a form and then the results are displayed below. I want to > change it to be on the navbar instead of as a separate page, where the > input form is on the navbar and the results are displayed below > > How would I have to change my search-form in order to do this? > > I think I can do something along the lines of this > > (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]) > > Any help would be much appreciated. > > -- > Note that posts from new members are moderated - please be patient with > your first post. > --- > You received this message because you are subscribed to the Google Groups > "ClojureScript" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at https://groups.google.com/group/clojurescript. > -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/clojurescript.
