FlexBox is a jQuery plugin that is intended to be a very flexible replacement for HTML textboxes and dropdowns using AJAX to retrieve and bind JSON data. 

Okay. Now what is FlexBox exactly?

It is a dynamic control which can present itself as a combobox with per-result HTML templates, a suggest box (like Google search) or a data-driven type-ahead input box.  It supports theming/skinning via CSS, flexible paging, configurable client-side cache and much more

Great.  We got it.  It’s clearly flexible, but is it easy to use? 

Yes.  It’s also super easy to use.  image

Prove it!

Okay, for example, you can generate a Google Suggests-type textbox in just a few steps:

  1. Reference jQuery and the FlexBox scripts.
  2. Add an empty div to the <body> tag wherever you want the FlexBox to appear.
  3. And assuming results.aspx returns JSON data and your div has an id = “ffb3″, this code will render a suggest box similar to that represented in the image to the right:
    $('#ffb3').flexbox('results.aspx', {
        showArrow: false
    });

Pretty slick, eh?  FlexBox was developed by a co-worker of mine, Noah Heldman, as an open source project hosted on CodePlex. It is well documented (including a Getting Started Guide) and comes along with a great demo page.  I think Noah did a really nice job with this plugin.  If you’re looking for a searchable textbox/dropdown, I suggest you check it out.

FlexBox CodePlex Project Page
FlexBox jQuery Plugin Page
FlexBox Overview

5 Comments to “FlexBox jQuery Plugin”

  1. [...] Home > ASP.NET, Best Practices, C#, Plugins, Samples, jQuery > HTTPHandler JSON Data Previous: FlexBox jQuery Plugin [...]

  2. anang says:

    what is code behind for results.aspx?
    thanks

  3. Dan says:

    Hi,

    Are there any examples available for using FlexBox with Asp.Net MVC framework?

    I am having a hard time getting this to work in MVC.

    Thanks!

  4. Feroz Minnadad says:

    i tried this control, the problem i am facing is, the values are not getting filtered. For example if i type ‘i’ means, it is not displaying the values that starts with ‘i’ but it is displaying the values which contains ‘i’ in all positions

  5. Ben Griswold says:

    @Feroz – The “StartsWith” filter is a common request. It isn’t built into Flexbox but you can incorporate this functionality by filtering via your backend logic. Please take a look at the code attached to this article: http://johnnycoder.com/blog/20.....json-data/. You’ll see how I’m filtering the results within the results.aspx file. I hope this helps.

Leave a Reply

You can wrap your code with [ruby][/ruby] or [python][/python] blocks for syntax highlighting and you can use these traditional tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>