Expert Software Development, Staffing & Consulting


Flexbox Demos

FlexBox CodePlex Project Page
FlexBox jQuery Plugin Page
Return to FlexBox Overview

Using FlexBox

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: '',
  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

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 dependent 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.