<div dir="ltr"><div>I am trying to implement an application similar to the Ur/Web CRUD demo. </div><div><br></div><div>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.</div><div><br></div><div>And in cases there there are many values, it is convenient if the drop-down menu or combo-box also has typeahead or autocomplete.</div><div><br></div><div>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:</div><div><br></div><div><a href="https://github.com/fmoo/react-typeahead">https://github.com/fmoo/react-typeahead</a></div><div><br></div><div>Another popular, lightweight JavaScript library is Mithril <a href="https://lhorie.github.io/mithril/">https://lhorie.github.io/mithril/</a> - which also apparently has some simple code implementing autocomplete: <a href="https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm">https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm</a></div><div><br></div><div>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. </div><div><br></div><div>On the other hand, there is some very sophisticated behavior exposed by these other JavaScript libraries, providing a very "modern" UI. </div><div><br></div><div>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?</div><div><br></div><div>And I have a few specific questions in the case of implementing a type-ahead drop-down menu in Ur/Web:</div><div><br></div><div>(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?</div><div><br></div><div>(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?</div><div><br></div><div>(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').</div><div><br></div><div>There is a lot of activity these days where web frameworks are writing "wrappers" around popular JavaScript libraries (eg, <a href="https://github.com/Day8/re-frame">https://github.com/Day8/re-frame</a>). </div><div><br></div><div>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.</div><div><br></div><div>Thanks!</div><div><br></div></div>