Fairway Technologies

FlexBox CodePlex Project Page
FlexBox jQuery Plugin Page
FlexBox Overview

FlexBox Demonstration

Using FlexBox

In all of the examples that call "results.aspx", the data is a list of 105 english words

Click in the input box, and type a single letter, such as "a"

Click the arrow on the right of the FlexBox, or click in the input box and tap the "Enter" or "Down Arrow" key on your keyboard

Try using up and down arrow to scroll through results, and tap the "Enter" key to select an option

If there are multiple pages of results, you can click the paging links, or use the left and right arrow keys to navigate between pages

Tap the escape key to hide the dropdown when the input box has focus

Examples

Example 1: Default, with static data

Code: $('#ffb1').flexbox('json.txt'); FlexBox:

Notes:

The most basic implementation is not very useful...please see the other examples below

json.txt contains the following data: {"results":[ {"id":"1","name":"Ant"}, {"id":"2","name":"Bear"}, {"id":"3","name":"Cat"}, {"id":"4","name":"Dog"}, {"id":"5","name":"Elephant"}, {"id":"6","name":"Fox"}, {"id":"7","name":"Guinea Pig"}, {"id":"8","name":"Horse"}, {"id":"9","name":"Iguana"}, {"id":"10","name":"Jaguar"} ]}

Example 2: ComboBox, with dynamic paged data

Code: $('#ffb2').flexbox('results.aspx'); FlexBox:

Notes:

Click in the box and type some non-matching characters, such as 'xyz', to see the default behavior when there are no matching results

Example 3: Like Google Suggest (hide the arrow)

Code: $('#ffb3').flexbox('results.aspx', { showArrow: false }); FlexBox:

Notes:

TODO

Example 4: Straight type-ahead (hide the dropdown)

Code: $('#ffb4').flexbox('results.aspx', { showResults: false }); FlexBox:

Notes:

TODO

Example 5: Disable paging (no scrolling), new width

Code: $('#ffb5').flexbox('results.aspx', { width: 120, paging: false }); FlexBox:

Notes:

TODO

Example 6: Force Scrolling, Show Watermark, use POST

Code: $('#ffb6').flexbox('results.aspx', { watermark: 'Enter account number', paging: false, maxVisibleRows: 8, method: 'POST' }); FlexBox:

Notes:

TODO

Example 7: Set an initial value, and change the page size

Code: $('#ffb7').flexbox('results.aspx', { initialValue: 'abjure', width: 350, paging: { pageSize: 5 } }); FlexBox:

Notes:

You can use the setValue() function instead of the initialValue configuration option, if you need to set the initial value based on data that is not available when the FlexBox is loaded: var ffb7 = $('#ffb7').flexbox('results.aspx', { width: 350, paging: { pageSize: 5 } }); ffb7.setValue('abjure');

Example 8: Create a template for each matching result, and call a JavaScript function when a result is selected

Code: $('#ffb8').flexbox('results.aspx', { resultTemplate: '<div class="col1">{id}</div> <div class="col2">{name}</div>', watermark: 'Enter account number or name', width: 300, onSelect: function() { $('#ffb8-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + this.getAttribute('hiddenValue')); } }); FlexBox:

Notes:

TODO

Example 9: Do not auto-complete the first match, and allow new values

Code: $('#ffb9').flexbox('results.aspx', { autoCompleteFirstMatch: false, noResultsText: '', onSelect: function() { $('#ffb9-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + this.getAttribute('hiddenValue')); } }); $('#ffb9_input').blur(function() { $('#ffb9-result') .html('The value passed when the form is ' + 'submitted is "' + this.value + '"'); }); FlexBox:

Notes:

If a new value is entered into the input box, and the form is submitted, the "ffb9" form field will be an empty string, since there is no corresponding "id" value. To access the typed-in value when the form is submitted, check for "ffb9_input" in the posted form variables.

Example 10: Simulate <select> tag, and pass a JSON object as the first parameter (do not retrieve data from url)

Code: $('#ffb10').flexbox({ "results": [ { "id": "1", "name": "Ant" }, { "id": "2", "name": "Bear" }, { "id": "3", "name": "Cat" }, { "id": "4", "name": "Dog" }, { "id": "5", "name": "Elephant" }, { "id": "6", "name": "Fox" }, { "id": "7", "name": "Guinea Pig" }, { "id": "8", "name": "Horse" }, { "id": "9", "name": "Iguana" }, { "id": "10", "name": "Jaguar" } ], "total": 10 }, { allowInput: false, paging: false, maxVisibleRows: 8 }); FlexBox:

Notes:

Allows you to bind to local data, or chain multiple FlexBoxes. The first FlexBox can populate a "child" FlexBox based on a $.getJSON() call within the first FlexBox's onSelect function: $('#parent').flexbox('getparentdata.aspx', { onSelect: function() { $.getJSON('getchilddata.aspx', {id:this.getAttribute('hiddenValue')}, function(data) { $('#child').flexbox(data); }); } }); In the future, I plan to make it much easier to handle chained, or dependant dropdowns.

Example 11: Static data, with client-side paging (no autocomplete support)

Code: $('#ffb11').flexbox('json.txt', { paging: { pageSize: 5 }, allowInput: false }); FlexBox:

Notes:

Allows you to load all data up front (client or server side), and page through that data on the client side. Note that this depends on FlexBox caching, so the "maxCacheBytes" configuration option must be greater than zero! I have not yet implemented querying/autocomplete against client-side data, but plan to in the future...

Example 1: Default, with static data
Code: $('#ffb1').flexbox('json.txt');	FlexBox:
Notes: The most basic implementation is not very useful...please see the other examples below json.txt contains the following data: {"results":[ {"id":"1","name":"Ant"}, {"id":"2","name":"Bear"}, {"id":"3","name":"Cat"}, {"id":"4","name":"Dog"}, {"id":"5","name":"Elephant"}, {"id":"6","name":"Fox"}, {"id":"7","name":"Guinea Pig"}, {"id":"8","name":"Horse"}, {"id":"9","name":"Iguana"}, {"id":"10","name":"Jaguar"} ]}

Example 2: ComboBox, with dynamic paged data
Code: $('#ffb2').flexbox('results.aspx');	FlexBox:
Notes: Click in the box and type some non-matching characters, such as 'xyz', to see the default behavior when there are no matching results

Example 3: Like Google Suggest (hide the arrow)
Code: $('#ffb3').flexbox('results.aspx', { showArrow: false });	FlexBox:
Notes: TODO

Example 4: Straight type-ahead (hide the dropdown)
Code: $('#ffb4').flexbox('results.aspx', { showResults: false });	FlexBox:
Notes: TODO

Example 5: Disable paging (no scrolling), new width
Code: $('#ffb5').flexbox('results.aspx', { width: 120, paging: false });	FlexBox:
Notes: TODO

Example 6: Force Scrolling, Show Watermark, use POST
Code: $('#ffb6').flexbox('results.aspx', { watermark: 'Enter account number', paging: false, maxVisibleRows: 8, method: 'POST' });	FlexBox:
Notes: TODO

Example 7: Set an initial value, and change the page size
Code: $('#ffb7').flexbox('results.aspx', { initialValue: 'abjure', width: 350, paging: { pageSize: 5 } });	FlexBox:
Notes: You can use the setValue() function instead of the initialValue configuration option, if you need to set the initial value based on data that is not available when the FlexBox is loaded: var ffb7 = $('#ffb7').flexbox('results.aspx', { width: 350, paging: { pageSize: 5 } }); ffb7.setValue('abjure');

Example 8: Create a template for each matching result, and call a JavaScript function when a result is selected
Code: $('#ffb8').flexbox('results.aspx', { resultTemplate: '<div class="col1">{id}</div> <div class="col2">{name}</div>', watermark: 'Enter account number or name', width: 300, onSelect: function() { $('#ffb8-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + this.getAttribute('hiddenValue')); } });	FlexBox:
Notes: TODO

Example 9: Do not auto-complete the first match, and allow new values
Code: $('#ffb9').flexbox('results.aspx', { autoCompleteFirstMatch: false, noResultsText: '', onSelect: function() { $('#ffb9-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + this.getAttribute('hiddenValue')); } }); $('#ffb9_input').blur(function() { $('#ffb9-result') .html('The value passed when the form is ' + 'submitted is "' + this.value + '"'); });	FlexBox:
Notes: If a new value is entered into the input box, and the form is submitted, the "ffb9" form field will be an empty string, since there is no corresponding "id" value. To access the typed-in value when the form is submitted, check for "ffb9_input" in the posted form variables.

Example 10: Simulate <select> tag, and pass a JSON object as the first parameter (do not retrieve data from url)
Code: $('#ffb10').flexbox({ "results": [ { "id": "1", "name": "Ant" }, { "id": "2", "name": "Bear" }, { "id": "3", "name": "Cat" }, { "id": "4", "name": "Dog" }, { "id": "5", "name": "Elephant" }, { "id": "6", "name": "Fox" }, { "id": "7", "name": "Guinea Pig" }, { "id": "8", "name": "Horse" }, { "id": "9", "name": "Iguana" }, { "id": "10", "name": "Jaguar" } ], "total": 10 }, { allowInput: false, paging: false, maxVisibleRows: 8 });	FlexBox:
Notes: Allows you to bind to local data, or chain multiple FlexBoxes. The first FlexBox can populate a "child" FlexBox based on a $.getJSON() call within the first FlexBox's onSelect function: $('#parent').flexbox('getparentdata.aspx', { onSelect: function() { $.getJSON('getchilddata.aspx', {id:this.getAttribute('hiddenValue')}, function(data) { $('#child').flexbox(data); }); } }); In the future, I plan to make it much easier to handle chained, or dependant dropdowns.

Example 11: Static data, with client-side paging (no autocomplete support)
Code: $('#ffb11').flexbox('json.txt', { paging: { pageSize: 5 }, allowInput: false });	FlexBox:
Notes: Allows you to load all data up front (client or server side), and page through that data on the client side. Note that this depends on FlexBox caching, so the "maxCacheBytes" configuration option must be greater than zero! I have not yet implemented querying/autocomplete against client-side data, but plan to in the future...

Using FlexBox

Examples

Technology