Expert Software Development, Staffing & Consulting

Set to false to simulate Google Suggest, which forces the user to type before results
are displayed.

Set to false to hide the dropdown results. Exact matches appear immediately,
and are selected in the input box.

Text to display when there are no results matching what the user typed.
Appears as a one-row dropdown below the input box.

Specifies the overall width of the FlexBox. Automatically adjusts to
accommodate the arrow as necessary.

When set to 0 (zero), this option is ignored. Otherwise, you can set
this value to force scrolling. This can be used in conjunction with
paging.pageSize.

Helpful text that appears in the input box when it is loaded.
Automatically hides when the arrow is clicked, or the input box gets
focus. Ignored if initialValue is set. This option can be styled
by changing the class ‘.ffb-input.watermark’.

This very flexible property allows you to specify a template that is
applied to each row of data returned. The template is a combination of
html and JSON properties (in curly braces). For example, to create a
two-column result template that displays the id in the first column, and
the name in the second column, you might use this:

$('#fb').flexbox('results.aspx', {
    resultTemplate:
        '

' +
        '

'
}

For each object in the JSON results array, the resultTemplate is applied, and the
actual value in the JSON data is substituted for the {property}.
You can also use dot notation for nested JSON properties (e.g. {Thumbnail.Url}).

If ‘GET’, will call jQuery’s $.getJSON() function. If ‘POST’, will call jQuery’s
$.post() method, with “post” as the fourth parameter. “POST” is useful for ASP.NET
Web Services (Script methods). When POSTing to an ASP.NET page, remember to check
Request.Form (or just Request) in the code-behind, instead of Request.QueryString.

If set to true, the input box will automatically populate the first match for the text entered,
and highlight the remaining characters. If set to false, the input box will always display only
what the user types until a selection is made.

If set to true, the first matching item in the list will appear selected.
If set to false, no items will be selected when a match is made.

If set to false, behaves more like a standard <select> element, disallowing
user input. If set to true (the default), acts like a combobox.

The number of milliseconds to wait before the query is executed (after the user clicks or types in the FlexBox).
Note: if this number is reduced, backspacing on highlighted matches in the input box may not work as expected.

The minimum number of characters the user must enter before a search is executed.
Note that if showArrow = true, and arrowQuery = ”, the user can click the arrow
to view results (without typing any characters). Zero (0) is an invalid option
for this property.

Specifies whether the text the user types should be highlighted within the results.
Use the matchClass option to set the css class for highlighted characters.

Specifies the type of RegEx modifier to apply when determining how to highlight matches.
Options are:

• ‘i’: case-insensitive match
• ‘g’: global match (match all occurrences within the string)
• ‘gi’: global, case-insensitive match
• ‘m’: multi-line match

The query to pass to the server when the arrow is clicked. By default, clicking the
arrow will return all results (up to paging.pageSize, which is 10 by default). If you
wanted to limit the results returned to those that start with the letter ‘a’, you can
set arrowQuery to ‘a’,

The function to run when a result is selected. Use the full power of jQuery to write
values to divs, or even make another JSON call! Within this function, if you want to get
the text displayed in the input box, use this.value, and if you want to get the hidden
value (see the hiddenValue configuration options), use this.getAttribute(‘hiddenValue’).

$('#fb').flexbox('results.aspx', {
onSelect: function() {
$('#fb-result').html('You selected "' + this.value + '", ' +
'which has a hidden value of ' +
this.getAttribute('hiddenValue'));
}
});

The amount of data you will allow to be cached on the client side. Setting this
value to 0 (zero) disables the cache. maxCacheBytes uses a JavaScript
associative array to quickly access data based on query and current page, and uses
an array to maintain a list of most recently used items (MRU).

Overrides the name of the class for the main FlexBox div.

Overrides the name of the class for the content div.

Overrides the name of the class for the input element.

Overrides the name of the class for the arrow image.

Overrides the name of the class for “selected” items (rows).

Overrides the name of the class for showing where your query matches the result.

Specifies the class to apply to the noResultsText configuration options.

JSON property whose value is displayed in the input box when a result is selected.

JSON property whose value is submitted when the form is submitted. Automatically
updated whenever the displayValue changes.

Specifies the value that should appear in the input box when the FlexBox is loaded.
You can also set this manually using the setValue() method.

JSON property in returned results that references the array of JSON objects
representing each row of data.

JSON property in returned results that references the total number of results
the query returned (used for paging only, so the paging toolbar can properly
calculate how many pages of data exist).

The paging object contains many properties to customize the appearance of the paging toolbar:

paging: {
  style: 'input', // or 'links'
  cssClass: 'paging', // prefix with containerClass (e.g. .ffb .paging)
  pageSize: 10 // acts as a threshold.
}