autocomplete/typeahead in Reagent/re-frame

[Jamie Orchard-Hays]

What are folks out there using for autocomplete/typeahead in Reagent/re-frame apps?

Cheers,

Jamie

[Jamie Orchard-Hays]

Bumping this. Anyone have a favorite solution?

Jamie

[Marc Fawzi]

I'm going to be making my own in Reagent ... except i don't currently have internal customers for it

the approach I'm taking to assuring correct order of server responses (as individual requests will take variable amount of time to return) is your standard debounce (300ms-500ms) is to hold the object returned from the ajax call (xhr object in JS land, and I assume some cljs object returned by cljs-ajax) and compare it to the one passed into the success handler and only display the results of autocomplete if the two match... this is the standard recipe in JS land, and should be possible here too

RxJS does it for you by treating the separate events as a stream and re-ordering

http://jsfiddle.net/mattpodwysocki/AL8Mj/

HTH

--
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 clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.

[Mike Thompson]

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

[Jamie Orchard-Hays]

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.

[Marc Fawzi]

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

[Colin Yates]

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.

[Jamie Orchard-Hays]

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

[Oliver Gorman]

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"}]

[Jamie Orchard-Hays]

Thanks. I just discovered this afternoon the typeahead works fine in dev mode (compile optimizations :none) but not in production. I've got the externs I need. The drop-down works, but the selector receives nils instead of the values.

If anyone has ideas, I'm all eyes.

Cheers,

Jamie

[henry w]

Hi Mike,

I've come across this thread just now as a re-com user, wanting to have an autocomplete that is fetching data from a server.

I have made only a couple of line changes to re-com dropdown.cljs to enable this and it seems to be working fine: https://gist.github.com/ohlo/f0b0a9b1d6f9d395170a

How it works is that when the filter text changes, it and the 'choices' ratom are posted off in a re-frame event, so that in a handler fn the choices ratom value can be changed to contain results relevant for the search.

the gist is just a hack so far, may be of interest to others on this thread. I could have a go at making it pull-request quality if you were interested?

Regards,
Henry