How To "Bubble" List Items in the EnsembleMenuSelect Component

ServiceDesk Forms use the EnsembleMenuSelect Component to represent Hierarchy Data, for example:

This example shows a manageable list; If your data is less than manageable, you can use the following technique to "bubble" list items to the top.

We will be using an 'onkeydown' event in the EnsembleMenuSelect Component which compares the pressed key against the 1st character of each list item.
The component configuration looks like this:

The charBubble() function resides in the Form Builder -> Behavior -> Script configuration, for example:

JavaScript source:

function charBubble() {
  if (document.getElementsByClassName("top_level_over")[0]) {
    var categories = document.getElementsByClassName("dropmenudiv")[0];
    this.onkeypress = function(e) {
      e = e || window.event;
      var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
      if (charCode > 0) {
        var dropList = categories.getElementsByTagName("a");
        var l = dropList.length;
        for (i = 0; i < l; i++) {
          if (dropList[i].text.charAt(0).toLowerCase() == String.fromCharCode(charCode).toLowerCase()) {
            categories.insertBefore(dropList[i], dropList[0]);
          }
        }
      }
    };
  }
}

The following behavior can be expected:
 

• One must click the top of each Classification branch.
  As an example, click on 'Incident Management', then press a key to "bubble" the desired list item/s.
  We selected 'Software', now click on the 'Software' branch to enable the key press detection for the next list. Repeat as necessary.
• The "bubbled" item/s will be in reverse order on the 1st key press, a 2nd key press will reverse the order again leaving the item/s at the top of the list.
• If the mouse leaves the Drop List prior to selection, the original order will be presented on mouse re-entry and you will need to click the top of the branch again.

NOTE: The attached project utilizes the ServiceDesk Incident Management Hierarchy.