[Ur] Trying to create a data-bound typeahead/autocomplete drop-down menu

[Stefan Scott Alexander]

I am trying to implement an application similar to the Ur/Web CRUD demo.

In many CRUD applications, when displaying a foreign-key field (eg, the
field 'customer_id' in table 'invoice'), it is typical to use a data-bound
drop-down menu or combo-box.

And in cases there there are many values, it is convenient if the drop-down
menu or combo-box also has typeahead or autocomplete.

There are several JavaScript libraries which provide typeahead or
autocomplete for drop-down menus and combo-boxes, including some based on
the very popular ReactJS library, eg:

https://github.com/fmoo/react-typeahead

Another popular, lightweight JavaScript library is Mithril
https://lhorie.github.io/mithril/ - which also apparently has some simple
code implementing autocomplete:
https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm

I understand that Ur/Web's FFI can be used to call JavaScript, but I'm
unsure how to get started - particularly in the case of JavaScript library
such as ReactJS or Mithril, which have their own approach towards UI (based
on a "virtual DOM") - which might conflict with Ur/Web's
functional-reactive approach.

On the other hand, there is some very sophisticated behavior exposed by
these other JavaScript libraries, providing a very "modern" UI.

So as a general question, I would like to know what approach would be
recommended in order for Ur/Web to also provide this kind of "modern" web
UI: Would it be best to merely examine some of these existing "virtual DOM"
frameworks and re-implement what they do, using only Ur/Web FFI calling
"plain" JavaScript - or would it make sense to pick an existing JavaScript
library which is in some sense "compatible" with Ur/Web and make a
"wrapper" over it?

And I have a few specific questions in the case of implementing a
type-ahead drop-down menu in Ur/Web:

(1) Would it make sense to try to use Ur/Web's JavaScript FFI specifically
with a ReactJS or Mithril library - or would there be conflicts (overlaps)
between React's / Mithril's "virtual DOM" approach to UI and Ur/Web's
functional-reactive approach?

(2) If it's better to avoid ReactJS, Mithril etc. in order to avoid
conflicts/overlaps between React's virtual DOM approach and Ur/Web's
functional-reactive approach (and instead just use Ur/Web plus an FFI call
to some plain JavaScript in order to create a data-bound
typeahead/autocomplete drop-down menu), does anyone have any pointers on
how to get started in this direction?

(3) As a final note: it would be important for the drop-down menu to have
multiple columns, where the first column could be hidden (eg, the first
column would be the auto-increment integer-type primary key 'customer_id'
which the user doesn't need to actually see - while the second column would
be another column from the 'customer' table, such as the string-type column
'customer_name').

There is a lot of activity these days where web frameworks are writing
"wrappers" around popular JavaScript libraries (eg,
https://github.com/Day8/re-frame).

On the one hand, I'm not sure if this "wrapper" approach is recommended in
the case of Ur/Web - but on the other hand, there seems to be some
excellent functionality available in some of these JavaScript libraries,
and it seems like it could be useful to make some of this available in
Ur/Web. I just can't figure out if people think the best way would be to
re-implement stuff using Ur/Web and "plain" JavaScript - or to wrap some
existing JS library.

Thanks!
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.impredicative.com/pipermail/ur/attachments/20150708/62ae0b24/attachment.html>