Module `Bonsai_web_ui_query_box`Source

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.
"Clicking" on the suggestion list invokes on_select.
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.

Sourcemodule Suggestion_list_kind : sig ... end

Sourcemodule Expand_direction : sig ... end

Sourcetype 'k t = {

selected_item : 'k option;
view : Bonsai_web.Vdom.Node.t;
query : string;

}

Sourceval query : 'k t -> string

Sourceval view : 'k t -> Bonsai_web.Vdom.Node.t

Sourceval selected_item : 'k t -> 'k option

Sourcemodule Fields : sig ... end

Source

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 ->
  'k t Bonsai_web.Computation.t

Source

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 ->
  'k 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.

Sourcemodule Collate_map_with_score : sig ... end

Install

Dune Dependency

Authors

Maintainers

Sources

doc/bonsai.web_ui_query_box/Bonsai_web_ui_query_box/index.html

Module `Bonsai_web_ui_query_box`Source

package bonsai

Install

Dune Dependency

Authors

Maintainers

Sources

doc/bonsai.web_ui_query_box/Bonsai_web_ui_query_box/index.html

Module Bonsai_web_ui_query_boxSource

Module `Bonsai_web_ui_query_box`Source