Upon taking a look at all the available options for our NetAdvantage for jQuery igCombo widget, one can see how easy it is to accidently miss an option or two. Chances are, if you have been going for a quick setup of your control, you might have missed some of the nice things your igCombo can do – worry not, though ! We’ll discuss how to enable auto completion, highlighting selections by matched text and also filtering of matched results.

If you need help with adding an igCombo control to your page, this blog post might help you out.

If you only want to get the sample project – follow this link.

The basics

Right when you create your widget, match highlighting is turned on by default. This option will highlight all of the items in the combo box that match your input, based on a search condition. Here’s an illustration:

“Multi” means that the igCombo will try to find whatever your input is, in any of the selections’ names.  The image to the left shows that if we search for “Blue”, we will have a total of 4 items highlighted ( highlighting is actually making the text bold – the green rectangles you see were added in by me ). If we try to look for “Fast Car”, we get no highlights – this is so because even though these two words are present in some selections, they are separated by another word which we have not included in our search.

In the lower half we can see the “Starts With” criteria in action. It’s pretty self-descriptive – if your input matches the beginning text of any selection, that selection will be highlighted. If we type in “Blue” no highlights appear because we simply do not have any selections starting with “Blue”.

Now here’s what filtering does. When you enable filtering ( more on how to do that in a little while ), any text you input in the igCombo will alter available selections, only showing you the ones that match your filtering condition ( which is “contains” i.e. “multi” from the example above ). Here’s what it looks like:

You see that while having filtering disabled, typing in any text will not affect the results shown in the igCombo widget. Once we enable filtering, typing in the same text will remove all results that do not contain our input. This does not mean that the elements stop existing – they are just not shown because they do not relate to what we’re looking for.

The last showcase is going to be on auto-completion. After that, we’ll see how to enable these features. But right now – auto-completion. An option that is pretty obvious at what it does, however there is something I’d like to point out.

With auto-complete off, typing in text will either trigger a highlight or a filter on the results, provided that either of those is turned on ( in this example, both are disabled ). As soon as you turn auto-complete on, your input will automatically be finished into the first, alphabetically-wise, result. What I wanted to point out was that as soon as you turn auto-complete on, the filtering condition automatically becomes “starts with”.

On the image, we’ve typed in “Slow Bl” and the igCombo box has filled that in for us to read “Slow Blue Car”, as well as selected the text that was automatically added – in case we were looking for something else.

So now when you know what each feature does, it’s time to find out how to enable them.

Configuration

Once you know what you want to enable, the process of doing so is pretty simple. Enabling auto-complete and match highlighting is a no-brainer, you do it by adding the following two lines of code to the initialization section of your igCombo widget:

   1: comboTarget.igCombo({

   2:     autoComplete: true,

   3:     renderMatchItems: "multi"

   4: });

You can check the possible values for “renderMatchItems” by visiting the API documentation page. And while on that page, take a look at “filteringType” since that is the property you need to enable filtering. The following line will tell the igCombo to filter its results:

   1: comboTarget.igCombo({

   2:     filteringType: "local"

   3: });

And that’s pretty much all there is to it.

Conclusion

To sum everything up, we’ve talked about three UX-heavy features which say "Let me assist you in finding exactly what you need, and find it quick !". There is no reason not to use at least one of the options listed here, granted you are now aware of how effortlessly you can use them.