Oracle APEX Page Item shuttle with filter

Introduction:

Here is small tip how to create filter / search field for APEX shuttle item values. For this you need just place jQuery code to page JavaScript Function and Global Variable Declaration.

Sample Code:

(function($) {
  $.fn.htmldbShuttlefilter = function(options) {

    options = $.extend({}, {
      "filterPlaceholder": "Filter",
      "buttonTitle": "Clear filter",
      "buttonClass": [
        ,"a-Button"
        ,"a-Button--noLabel"
        ,"a-Button--withIcon"
        ,"a-Button--small"
        ,"a-Button--noUI"
        ,"a-Button--shuttle"
        ,"margin-top-none"
      ],
      "buttonIcon": "fa-times"
    }, options);

    function getShuttleValues(elem$) {
      return elem$.children("option").map(function() {
        return {
          text: $(this).text(),
          value: $(this).val()
        };
      });
    }

    return this.each(function(i) {

      var $self = $(this),

        shuttleResetBtnId = $self.attr("id") + "_RESET",
        $select = $self.find("select"),

        // get shuttle values
        shuttleValues = getShuttleValues($select),

        // filter reset button
        $resetBtn = $("<button/>", {
          "type": "button",
          "title": options.buttonTitle,
          "aria-label": options.buttonTitle,
          "class": options.buttonClass.join(" "),
          "css": {
            "padding": "4px"
          }
        }).append(
          $("<span/>", {
            "aria-hidden": "true",
            "class": "a-Icon fa " + options.buttonIcon,
          })
        ).click(function() {
          // clear filter text field
          $filter.val("").keyup();
        }),

        // filter text field
        $filter = $("<input/>", {
          "type": "text",
          "value": "",
          "autocomplete": "off",
          "placeholder": options.filterPlaceholder,
          "class": "text_field apex-item-text",
          "css": {
            "width": "100%"
          }
        }).keyup(function() {

          // filter shuttle when typing to text field
          var filterval = new RegExp("^" + $(this).val() + ".*", "i"),
            selectedValues = $select.eq(1).children("option").map(function() {
              return $(this).val();
            });

          // empty shuttle available values
          $select.eq(0).empty();
          // add values that match filter criteria
          $.each(shuttleValues, function(idx, obj) {
            if (
              obj.text.match(filterval) &&
              $.inArray(obj.value, selectedValues) < 0
            ) {
              $select.eq(0).append(new Option(obj.text, obj.value));
            }
          });
        });

      // add needed elements to page
      $self.prepend(
        $("<div/>", {
          "class": "t-Form-itemWrapper"
        })
        .append($filter).append(
          $("<span/>", {
            "class": "t-Form-itemText t-Form-itemText--post"
          }).append($resetBtn)
        )

      ).on("apexafterrefresh", function() {
        // initiliaze filter when shuttle is refreshed by parent item
        $filter.val("");
        shuttleValues = getShuttleValues($select);
      });

      // clear also filter from shuttle reset button
      $("#" + shuttleResetBtnId).click(function() {
        $filter.val("");
      });
    });
  }
})(apex.jQuery);

Add the Below code in JavaScript Execute when Page Loads

Sample Code :

$(".apex-item-group--shuttle").htmldbShuttlefilter();

Change the Px_SHUTTLE_NAME with your real shuttle item name.