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

[Stefan Scott Alexander]

To do this using a pure Ur/Web FRP approach (*without* using Ur/Web's
JavaScript FFI to talk to a library such as ReactJS or Mithril), I imagine
the starting point might be this snippet of code from the demo Crud2,
defining a function:

Widget = (fn [nm :: Name] => <xml>
  <select{nm}>
    <option>Ready</option>
    <option>Not ready</option>
  </select>
</xml>

Or, more completely, this record of 6 functions, from crud2.ur:

Ready = {



  Nam = "Ready",



  Show = (fn b => if b then

  <xml>Ready!</xml>

  else

  <xml>Not ready</xml>),



  Widget = (fn [nm :: Name] => <xml>

    <select{nm}>

      <option>Ready</option>

      <option>Not ready</option>

    </select>

  </xml>),



  WidgetPopulated = (fn [nm :: Name] b => <xml>

    <select{nm}>

      <option selected={b}>Ready</option>

      <option selected={not b}>Not ready</option>

    </select>

  </xml>),



  Parse = (fn s =>

    case s of

      "Ready" => True

    | "Not ready" => False

    |  _ => error <xml>Invalid ready/not ready</xml>),



  Inject = _



}


Then I imagine it would be necessary to add Ur/Web syntax such as:


  dyn

  source

  signal

  set

  {[ ]}


... in order to implement the interactivity - where every time the user
adds (or removes or changes) a letter in the field of the drop-down menu,
the displayed list of items of the drop-down menu would be instantly
updated.


And of course the values used to populate each 'option' in the 'select'
element would not simply be the two values 'true' and 'false', but rather
would come from a two-column SQL DML query, eg:


  select customer_id, customer_name from customer;


I don't think I could come up with this kind of FRP idiom on my own without
seeing an example.


I also don't have any idea of the syntax that would be used in order to
"handle" the event where the user has typed a keystroke, updating the
contents of the typeahead/autocomplete drop-down menu.


Finally, I am unsure whether the "timing" which Ur/Web would use for this
kind of code would be efficient, the same way ReactJS efficiently diffs its
virtual DOM.


+++

An example of the overall kind of CRUD generator I'd like to build can be
seen here, in the output from a Windows-based CRUD generator called SQL
Maestro PHP Generator for Mysql (or Postgresql):

http://demo.sqlmaestro.com/

(Scroll down a bit to see an actual table.)

The existing CRUD examples for Ur/Web probably already implement at least
half of the functionality of the above SQL Maestro PHP Generator demo -
using a single language which also happens to be typesafe, compact,
high-performance, low-memory, extensible, etc.

I imagine it would take only a few more pages of Ur/Web code - written by
someone good at Ur/Web and FRP - to implement the rest of the functionality of
something like SQL Maestro PHP Generator.

And it probably could be done without even taking recourse to Ur/Web's
JavaScript FFI.

As a FRP beginner myself, I don't think I could figure out the correct
idioms on my own, so I hope to eventually find some more pointers on this.

But maybe someone could at least confirm whether the approach outlines
above would be in the right direction?

Would it make sense to start with something like the functions mentioned
above, and then build onto that using syntax involving 'dyn', 'source',
'signal', 'set', and some kind of handler reacting to user keystrokes?

Thank you for any help.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.impredicative.com/pipermail/ur/attachments/20150708/aa8850ab/attachment.html>