If you have no idea what JQuery Chosen is, it is simply a plugin that makes long, unwieldy select boxes much more user friendly.

Using it with Angular JS is no problem. However, a cleaner and simpler way to use it is to make it as a Directive.

For me, this is how I did it.

I used the ngModel attribute to have the scope listen to any changes to it like setting a default value or when a user selects an item in the dropdown.

I tried to use ngOptions as my first choice and had the scope listen to ngOptions.length or attrs[‘options’].length. However when it gets loaded, since I am getting my list asynchronously from the server, it will throw out an Exception.

Not a program stopper but as a developer, nobody wants to see any kind of error messages in the console no matter how harmless they can be. In my case, since I always set all my ngModels a default value, I decided to listen to this attribute instead.

Before Angular JS, my idea of a cascading dropdown select would be to some dropdown components in my HTML page and loading the children based on its parent.

With Angular JS, I would recommend you avoid this style. Why create so 2 dropdown controls when you can have only one and show the options in a tree like structure together with its parent?

If your hierarchy involves more than 2 levels, you can easily create a directive for it.

For simplicity’s sake, rather than showing 2 dropdown controls and changing the second dropdown based on the parent chosen in the first dropdown, you can use the “group by” keyword in the ng-option attribute of the SELECT tag.

Think of “group by” the same way you do in SQL. Pretty easy, right?

A sample code would be:

This was annoying to begin with. In Swing, you do not have to worry about this because this feature is already part of it. In Java FX 2 however, it is not and I had to create a key listener to have the ComboBox select the first item that it comes across with that starts with the key character pressed.

And there is also another problem. If the ComboBox has so many items and the setVisibleRowCount() value is less than the number of the list size, it will not scroll down if the item selected is beyond the maximum visible row value.

It also took me some time to figure out how to get hold of the ListView reference from the ComboBox since this control is a combination of multiple controls: ListView, TextField and Button to name a few. You can only get hold of the ListView object from ComboBox if the popup is shown. Otherwise, you will get a NullPointerException.

So here is the key listener code.

How this works goes like this. When you type a character, it will go to the first item that matches that character, regardless of case sensitivity. If you transfer to another control, its cached characters will be removed so that when you go back to the ComboBox again, the cached string that you used to type will be reset.

You may notice that I also added an event filter for the ComboBox. This is because the ESC key does not get detected unless it is filtered. I really do not understand the inner workings but the ESC key gets detected only if it is captured in the event filter. When this happens, the keys will reset and any key you type will be considered as the first character.

I also added a mouse listener on the ComboBox so that when it is clicked and the popup list will appear, I will be able to get hold of the reference object to ListView and be able to call its scrollTo() method.

That’s it! To use this class, just call it like this:

Related Posts Plugin for WordPress, Blogger...