package bonsai

  1. Overview
  2. Docs
package bonsai
Legend:
Library
Module
Module type
Parameter
Class
Class type

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.