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.
Prove it!
Okay, for example, you can generate a Google Suggests-type textbox in just a few steps:
- Reference jQuery and the FlexBox scripts.
- Add an empty div to the <body> tag wherever you want the FlexBox to appear.
- 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
[...] Home > ASP.NET, Best Practices, C#, Plugins, Samples, jQuery > HTTPHandler JSON Data Previous: FlexBox jQuery Plugin [...]
what is code behind for results.aspx?
thanks
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!
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
@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.