bonsai v0.15.0 · OCaml Package

A textbox with suggested results, modeled off of Chrome's address bar.

"Enter" invokes on_select with the selected suggestion. If the suggestion list is closed, the callback is not invoked, because of course nothing is selected; instead the suggestion list is opened.
Focusing the the text input opens the suggestion list
"Escape" or unfocusing the text input closes the suggestion list
"Tab" and "Down Arrow" move the selected item down. If the suggestion list is closed, it gets opened, and the selected item is set to the top item.
"Shift-Tab" and "Up Arrow" move the selected item up. Again, if the list is closed, it gets opened, but selection is sent to the bottom item.
Editing the textbox content re-filters the items.
Changing the selected suggestion has no effect on the textbox content, since there might not be a string which exactly selects an item.

Only max_visible_items are rendered at once, so even with thousands of suggestions, DOM updates should be very quick.

module Suggestion_list_kind : sig ... end

module Expand_direction : sig ... end

val create : 
  ('k, 'cmp) Bonsai_web.Bonsai.comparator ->
  ?initial_query:string ->
  ?max_visible_items:int Bonsai_web.Value.t ->
  ?suggestion_list_kind:Suggestion_list_kind.t Bonsai_web.Value.t ->
  ?expand_direction:Expand_direction.t Bonsai_web.Value.t ->
  ?selected_item_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_list_container_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_input_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  f:
    (string Bonsai_web.Value.t ->
      ('k, Bonsai_web.Vdom.Node.t, 'cmp) Core.Map.t Bonsai_web.Computation.t) ->
  on_select:('k -> unit Bonsai_web.Effect.t) Bonsai_web.Value.t ->
  unit ->
  Bonsai_web.Vdom.Node.t Bonsai_web.Computation.t

val stringable : 
  ('k, 'cmp) Bonsai_web.Bonsai.comparator ->
  ?initial_query:string ->
  ?max_visible_items:int Bonsai_web.Value.t ->
  ?suggestion_list_kind:Suggestion_list_kind.t Bonsai_web.Value.t ->
  ?expand_direction:Expand_direction.t Bonsai_web.Value.t ->
  ?selected_item_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_list_container_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_input_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?extra_attr:Bonsai_web.Vdom.Attr.t Bonsai_web.Value.t ->
  ?to_view:('k -> string -> Bonsai_web.Vdom.Node.t) ->
  on_select:('k -> unit Bonsai_web.Effect.t) Bonsai_web.Value.t ->
  ('k, string, 'cmp) Core.Map.t Bonsai_web.Value.t ->
  Bonsai_web.Vdom.Node.t Bonsai_web.Computation.t

stringable is like create but takes a map with possible completion options, instead of a function to generate them. Completion options will be displayed if their string representation Fuzzy_matches the current query.

package bonsai