Keep parents items visible when searching

[mariela21180]

@clivezhg first of all, this is a great extension! thanks a lot for develop it!

The only thing that I couldn't solve with your extension is that the parent items remains visible when using the multiple+search options. Image example using your documentation array demo:

Could you please tell me if it's possible to force that?

[fikriefs]

Hi @mariela21180 , Have you managed to find the solution for this issue? I faced the same issue.

Thanks

[mariela21180]

Hi @mariela21180 , Have you managed to find the solution for this issue? I faced the same issue.

Thanks

@fikriefs no, sadly I could'n find a solution. I'm still waiting fo @clivezhg to see if it's possible to set that option on the extension.

[MrMartiniMo]

Hey, i found a solution for this, by writing my own (modified) select adapter. This will override the default behaviour from select2.

;(function (window) {
  window.jQuery(function ($) {
    /* custom select adapter */
    $.fn.select2.amd.define('CustomSelectAdapter', ['select2/data/select'], function (SelectAdapter) {
      SelectAdapter.prototype.query = function (params, callback) {
        var data = []
        var self = this
        var added = []

        var $options = this.$element.children()

        function checkParent($option) {
          var pup = $option.data('pup')

          if (pup) {
            var $parent = self.$element.find('[value="' + pup + '"]')
            var poption = self.item($parent)

            if (!added.includes($parent.val())) {
              if ($parent.data('pup')) {
                checkParent($parent)
              }

              data.push(poption)
              added.push($parent.val())
            }
          }
        }

        $options.each(function () {
          if (this.tagName.toLowerCase() !== 'option' && this.tagName.toLowerCase() !== 'optgroup') {
            return
          }

          var $option = $(this)

          var option = self.item($option)

          var matches = self.matches(params, option)

          if (matches !== null) {
            if (!added.includes($option.val())) {
              checkParent($option)

              data.push(matches)
              added.push($option.val())
            }
          }
        })

        callback({
          results: data,
        })
      }
    })

    /* init select2 tree inpus */
    $('.tree-input').each(function () {
      var $input = $(this)

      $input.select2ToTree({
        /* ... */
        selectAdapter: $.fn.select2.amd.require('CustomSelectAdapter'),
      })
    })
  })
})(window)