package bonsai

  1. Overview
  2. Docs
A library for building dynamic webapps, using Js_of_ocaml

Install 

dune-project
 Dependency

github.com Readme Changelog MIT License Edit opam file Versions (6)

Authors

  1. J
    Jane Street Group, LLC

Maintainers

  1. J
    Jane Street developers

Sources

v0.17.0.tar.gz
sha256=c78c4476ee6b856846e2d0941e5965009d5e1b853e564b2b1bee61202f0b1ebb

doc/bonsai.web_ui_query_box/Bonsai_web_ui_query_box/index.html

Module Bonsai_web_ui_query_boxSource

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 = {
  1. selected_item : 'k option;
  2. view : Bonsai_web.Vdom.Node.t;
  3. query : string;
  4. set_query : string -> unit Bonsai_web.Effect.t;
  5. focus_input : unit Bonsai_web.Effect.t;
}
Sourceval focus_input : 'k t -> unit Bonsai_web.Effect.t
Sourceval set_query : 'k t -> string -> unit Bonsai_web.Effect.t
Sourceval query : 'k t -> string
Sourceval selected_item : 'k t -> 'k option
Sourceval 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 -> ?on_blur:unit Ui_effect.t Bonsai_web.Value.t -> ?modify_input_on_select:('k -> string -> string) 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
Sourcemodule Filter_strategy : sig ... end
Sourceval 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) -> ?modify_input_on_select: [ `Reset | `Don't_change | `Autocomplete ] Bonsai_web.Value.t -> filter_strategy:Filter_strategy.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. Items are filtered and sorted based on filter_strategy.

  • `Fuzzy_match: uses the fuzzy_match library to only display items that match the current pattern. Items are displayed in the order they appear in the input map.
  • `Fuzzy_search_and_score: uses the fuzzy_search library to only display items that match the current pattern. It also scores how well each item matches in order to sort the matching items.
Sourcemodule Collate_map_with_score : sig ... end