FlexBox

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: '<div class="col1">{id}</div><div class="col2">{name}</div>' } 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. if <= pageSize results, paging doesn't appear showSummary: true, // whether to show 'displaying 1-10 of 200 results' text summaryClass: 'summary', // class for 'displaying 1-10 of 200 results', prefix with containerClass summaryTemplate: 'Displaying {start}-{end} of {total} results', // can use {page} and {pages} as well maxPageLinks: 5 // used only if style is 'links' }