Multi-Column Progressive Combo Box Filtering

In yesterday's article, I provided a demonstration of "progressive combo box filtering."  

As a refresher, here's progressive filtering in a nutshell:

As you enter text, the list of potential matches shrinks. That's progressive filtering in a nutshell.

What about multiple columns?

One of the great benefits of combo box controls are their fantastic signal-to-noise ratios.  You can display an abbreviated code in the first visible column so that the combo box itself takes only a small amount of form real estate.  But, when the combo box drops down, you can show several additional columns that provide context to the short code.  This is a useful technique even for read-only combo boxes.  Think of it as an on-demand tooltip.

Can't remember which airport has the IAH code? A quick drop down gets you the info.

So, using the combo box's extra columns to serve as an on-demand tooltip is a nice feature.  But that only helps you for fields that already have a value entered.  What if your user wants to choose one of the airports in Chicago but they can't remember their associated codes?  A basic progressive filter won't help because that only searches the first visible column.

But there's no technical reason why we can't allow the progressive filter to work for all columns.  It just requires a bit more code.

Demonstration

Here is an example of a multi-column progressive filtering implementation I wrote:

Can your combo boxes do this?

This takes yesterday's technique to the next level.  There are quite a few more technical challenges, too.  It's not complicated, necessarily.  It's basically just a game of edge-case-whac-a-mole.  Here's the development algorithm:

  1. implement the basic functionality
  2. test until you find unusual behavior
  3. fix the unusual behavior
  4. go to step 2

To see how I accomplish this effect and many other cool combo box tricks, join me next Friday, June 18, 2021, at 9 AM EDT for the Eastern Time Access User Group monthly webinar.  You won't be disappointed.

Photo by Nathan Dumlao on Unsplash