package bonsai
A library for building dynamic webapps, using Js_of_ocaml
Install
Dune Dependency
Authors
Maintainers
Sources
bonsai-v0.15.0.tar.gz
sha256=24c4c3149280abd639034ce3acf60e475a772202099e965be8bd8902524573ef
doc/bonsai.web_ui_query_box/Bonsai_web_ui_query_box/index.html
Module Bonsai_web_ui_query_box
A textbox with suggested results, modeled off of Chrome's address bar.
- "Enter" invokes
on_selectwith 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 ... endmodule Expand_direction : sig ... endval 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.tval 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.tstringable 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.