FlexBox Demos

Return to FlexBox Overview

Using FlexBox

• In all of the examples below, the data is a JSON object with an array of 243 countries and their country codes
• 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 page up/page down keys to navigate between pages
• Tap the escape key to hide the dropdown when the input box has focus

Examples

Example 1: ComboBox, with dynamic paged data
Code: $('#ffb1').flexbox(countries);	FlexBox:
Notes: Click the arrow, or click in the input box and type the letter "m" to see a list of matching countries Or, 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 2: Like Google Suggest (hide the arrow)
Code: $('#ffb2').flexbox(countries, { showArrow: false });	FlexBox:
Notes: Set showArrow to false to hide it, and use FlexBox just like you use Google Search

Example 3: Straight type-ahead (hide the dropdown)
Code: $('#ffb3').flexbox(countries, { showResults: false, autoCompleteFirstMatch: true });	FlexBox:
Notes: Hide the results entirely, but automatically complete the first matching element. You can use this when you already know all of the items, and don't need to see the whole list (e.g. selecting a U.S. state). It keeps your forms nice and compact...

Example 4: Disable paging (no scrolling), new width
Code: $('#ffb4').flexbox(countries, { width: 300, paging: false });	FlexBox:
Notes: In this example, we override the default width, and turn off paging entirely. Watch out though, this is most likely not what you want for long lists (like the one in the example!).

Example 5: Force Scrolling, Show Watermark
Code: $('#ffb5').flexbox(countries, { watermark: 'Enter country name', paging: false, maxVisibleRows: 8 });	FlexBox:
Notes: The watermark is a nice touch, and helps your users without compromising screen real estate. In this example we are also limiting the number of visible rows, which is usually a good idea if paging is turned off. This is a much more practical example than Example 4.

Example 6: Set an initial value, and change the page size
Code: $('#ffb6').flexbox(countries, { initialValue: 'Finland', 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(countries, { width: 350, paging: { pageSize: 5 } }); ffb7.setValue('Finland');

Example 7: Create a template for each matching result, and call a JavaScript function when a result is selected
Code: $('#ffb7').flexbox(countries, { resultTemplate: '<div class="col1"> <img src="img/flags/{id}.gif"/> </div> <div class="col2">{name}</div>', watermark: 'Enter country name', width: 260, onSelect: function() { $('#ffb7-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + $('input[name=ffb7]').val()); } });	FlexBox:
Notes: My favorite example... You can use your own html as a template for each row (result). If you surround the name of a valid JSON property in curly braces, that value will be merged in for each row. In this case, we have a folder full of images that are named based on the two-letter country code (represented by {id}). We are also styling the "col1" and "col2" divs by floating them left and giving them a width.

Example 8: Do not auto-complete the first match, and allow new values
Code: $('#ffb8').flexbox(countries, { autoCompleteFirstMatch: false, noResultsText: '', onSelect: function() { $('#ffb8-result') .html('You selected "' + this.value + '", ' + 'which has a hidden value of ' + $('input[name=ffb8]').val()); } }); $('#ffb8_input').blur(function() { $('#ffb8-result').html( 'The value passed when the form is ' + 'submitted is ' + $('input[name=ffb8]').val()); });	FlexBox:
Notes: If a new value is entered into the input box, and the form is submitted, the "ffb8" form field will contain the typed-in value.

Example 9: Simulate <select> tag by disallowing input
Code: $('#ffb9').flexbox(countries, { 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 10: Large data set
Code: $('#ffb10').flexbox(largedataset);	FlexBox:
Notes: This data set is generated dynamically on every page load, and contains 10,000 items. Notice that although the data set is quite large, performance is excellent.