On Tuesday, 21 April 2015 09:42:26 UTC-5, Jamie Orchard-Hays wrote: > Thanks for all the suggestions, y'all. I spent a few hours on the weekend and > Monday prototyping what effort it would take to create my own. Too much given > the many hats I'm wearing and current workload. I was able to get typeahead > working in it. I had been using this with a regular React component that my > cljs is replacing. > > Marc, if you get going on yours, and want some help, I'd be interested. > > Gist of it > https://gist.github.com/jamieorc/1c48a19342f83d3de2a3#file-typeahead-in-reagent-cljs > > Jamie > > > On Apr 18, 2015, at 10:54 AM, Colin Yates <[email protected]> wrote: > > > I frequently find myself check-summing the request/response with a > > simple incrementing integer (or UUID would work) and storing the > > checksum of the last request on the client. If the server responds > > with anything other than the last request then I may display it > > (depending on how long it has been since I last updated the UI so it > > appears responsive) or more likely disregard it. > > > > It can be as simple as an atom {} where the key is the unique > > identifier for the semantic request (e.g. :page1/field-a) and the > > value is the checksum of the last request to the server. > > > > Pseudo code, in case it isn't clear (and if it isn't I haven't > > explained it well as it is brain dead simple :)): > > > > (defn do-request [request-key details handler] > > (let [checksum (swap! checksums assoc request-key inc) > > stale-aware-handler (fn [{:keys [checksum] :as response}] > > (when (= checksum (:request-key @checksums)) (handler response))) > > (ajax-malarky-send details stale-aware-handler))) > > > > In my form: > > > > (defn field-a [] > > [lovely.hiccup.something {:on-click #(do-request ::field-a (-> % > > ....) request-results)}]) > > > > (defn field-b [] > > [lovely.hiccup.something {:on-click #(do-request ::field-b (-> % > > ....) request-results)}]) > > > > Typed on the fly so probably all sorts of things wrong with it ;), but HTH. > > > > > > On 18 April 2015 at 15:28, Marc Fawzi <[email protected]> wrote: > >> Another idea for you is to have the server include in its response what > >> text input value it was sent so that if the actual/current text input > >> value differs from that then you can ignore the results. With a 300ms > >> debounce on keyup this should be pretty smooth. > >> > >> Sent from my iPhone > >> > >>> On Apr 18, 2015, at 6:53 AM, Jamie Orchard-Hays <[email protected]> > >>> wrote: > >>> > >>> Thanks, Mike. I had taken a quick glance at re-com the other for this. > >>> I'll look again, though I do need round-trip to server to progressively > >>> acquire options. > >>> > >>> > >>>> On Apr 18, 2015, at 3:04 AM, Mike Thompson <[email protected]> > >>>> wrote: > >>>> > >>>>> On Saturday, April 18, 2015 at 1:26:13 AM UTC+10, Jamie Orchard-Hays > >>>>> wrote: > >>>>> Bumping this. Anyone have a favorite solution? > >>>>> > >>>>> Jamie > >>>>> > >>>>>> On Apr 16, 2015, at 8:37 PM, Jamie Orchard-Hays <[email protected]> > >>>>>> wrote: > >>>>>> > >>>>>> What are folks out there using for autocomplete/typeahead in > >>>>>> Reagent/re-frame apps? > >>>> > >>>> Hi Jamie, > >>>> > >>>> It is not clear if you need to round-trip to a server, or not, to > >>>> progressively acquire the options, but assuming you don't ... > >>>> > >>>> Re-com has something in this space: > >>>> http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/dropdown > >>>> > >>>> On the right, under Demo, choose the "Dropdown with filtering" demo, > >>>> then click on the dropdown at the bottom right. Type in stuff. > >>>> > >>>> -- > >>>> Mike
The reagent-forms project has a typeahead control. May be worth a look. https://github.com/reagent-project/reagent-forms :typeahead The typeahead field uses a :data-source key bound to a function that takes the current input and returns a list of matching results. The control uses an input element to handle user input and renders the list of choices as an unordered list element containing one or more list item elements. Users may specify the css classes used to render each of these elements using the keys :input-class, :list-class and :item-class. Users may additionally specify a css class to handle highlighting of the current selection with the :highlight-class key. Reference css classes are included in the resources/public/css/reagent-forms.css file. (defn friend-source [text] (filter #(-> % (.toLowerCase %) (.indexOf text) (> -1)) ["Alice" "Alan" "Bob" "Beth" "Jim" "Jane" "Kim" "Rob" "Zoe"])) [:div {:field :typeahead :id :ta :data-source friend-source :input-class "form-control" :list-class "typeahead-list" :item-class "typeahead-item" :highlight-class "highlighted"}] -- 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 http://groups.google.com/group/clojurescript.
