https://rawb.codeplex.com/SourceControl/latest#Rawb/Rawb/js/rawb.ui.js
rawb.DropDown({arg, ...})
The DropDown is a more versatile version of the HTML 'select' control,
supporting autocompletion, on-demand and asynchronous data fetching,
and interactive filtering and sorting.
Example HTML:
<!-- ko template: { name: 'RawbDropDownTemplate', data: dd } -->
<!-- /ko -->
Example JavaScript:
var options = ko.observable([{a: "Alice", b: 1}, {a: "Bob", b: 2}, {a: "Cissy", b: 3}]);
var dd = new rawb.DropDown({options: options, fieldName: "a"});
ko.applyBindings({dd: dd});
InvariantIf the
input exactly matches a filtered
field in
options, then
selection is set
to the first such field. Otherwise
selection is set to
undefined.
Parametersinput:
observable stringOptional (default
""); exposed as observable.
The text displayed in the input box, reflecting either the
current
selection or what the user has typed in.
enabled:
booleanOptional (default
true); may be observable; exposed as observable.
If
true, the input field is enabled.
If
false, the input field is disabled.
options:
array of objectOptional (default
[]); exposed as observable.
The array of option objects from which a selection may be made
(note that this
must be an array of objects, it cannot be an
array of scalars, such as numbers, strings, dates, etc.).
fieldName: stringRequired; must not be an observable; exposed as non-observable.
The name of the field in the
options objects against which
input is matched to decide the value of
selection.
selection: observable objectOptional (default
undefined); must be writable observable; exposed as observable.
The first value
x drawn from
options such that
xfieldName exactly
matches
input (
selection is
undefined if there is no such match).
matchFn: function (DropDown) -> array of MatchOptional (default is built-in).
The function used to filter and order
options partially matching
input, returning a list of
Match objects (see below).
The default
matchFn deems the
input to match all
options where the
input is a
(case insensitive) substring of the option
fieldName property.
The default match comparison function used for ordering is
matchComparisonFn (see below).
The
DropDown control invokes
matchFn whenever the
input or
options are updated.
The
matchFn must (a) filter out
options which do not match the
input, (b) order the
options which do match the
input, and (c) convert those matching
options into
Matchobjects (see below).
Match objects: { option: object, all: string, match: { prefix: string, match: string, suffix: string } }The default
matchComparisonFn and
matchTemplateID HTML template assume each
Matchrecord will include the fields listed:
option is the matching item from
options;
all is the complete
optionfieldName value;
prefix is the part of the
fieldName value preceding the match against
input;
match is the part of the
fieldName value matching the
input (the case may be different);
suffix is the part of the
fieldName value following the match against
input.
matchComparisonFn: function (Match, Match) -> numberOptional (default is built-in).
The default match comparison function orders as follows: matches with empty prefixes
preceed those with non-empty prefixes; within each partition, matches are alphabetically sorted
in case insensitive fashion.
fetchFn: function (DropDown)Optional (default does nothing).
The function used to update
options in response to the
input changing.
This allows
options to be fetched, e.g., via an AJAX call.
matchTemplateID: stringOptional (default
"RawbDropDownMatchTemplate").
The HTML template used to display matches in the drop-down grid.
width: numberOptional (default
200); may be observable; exposed as observable.
The width in pixels of the input field and drop-down grid.
inputHeight: numberOptional (default
20); may be observable; exposed as observable.
The height in pixels of the input field.
gridHeight: numberOptional (default
200); may be observable; exposed as observable.
The maximum height in pixels of the drop-down grid.
gridRowHeight: numberOptional (default
24); may be observable; exposed as observable.
The maximum height in pixels of each match row in the drop-down grid.
gridFieldWidth: numberOptional (default
1000); may be observable; exposed as observable.
The scrollable width in pixels of each match row in the drop-down grid (only
needed if the
hScrollBarHeight has been set).
gridVScrollBarWidth: numberOptional (default
10); may be observable; exposed as observable.
The width in pixels of the vertical scrollbar on the drop-down grid (only displayed
when there are more matches than can be displayed in the given
gridHeight).
gridHScrollBarHeight: numberOptional (default
0); may be observable; exposed as observable.
The height in pixels of the horizontal scrollbar (setting this to zero means
no horizontal scrollbar will be displayed).
Methodsdispose():
function ()Disposes Knockout subscriptions created by the
DropDown.
Use this when the
DropDown goes out of scope if you are concerned about memory leaks.