Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom MultipleSelection with CustomAdapter no search inline

See original GitHub issue

Prerequisites

[ x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate [x ] The issue still exists against the latest master branch of Select2 [x ] This is not a usage question (Those should be directed to the community) [x ] I have attempted to find the simplest possible steps to reproduce the issue [x ]I have included a failing test as a pull request (Optional)

The Problem

When I try to use CustomSelectionAdapter the search never appear in the input the

 '<li class="select2-search select2-search--inline">' +
        '<input class="select2-search__field" type="search" tabindex="-1"' +
        ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
        ' spellcheck="false" role="textbox" aria-autocomplete="list" />' +
      '</li>'

never appear all the rest is working perfectly

Steps to reproduce the issue

$.fn.select2.amd.require([
        "select2/utils",
       "select2/selection/multiple",
       "select2/selection/placeholder",
    ], function (Utils, MultipleSelection, Placeholder) {

      var CustomSelectionAdapter = Utils.Decorate(MultipleSelection, Placeholder);
      CustomSelectionAdapter = Utils.Decorate(CustomSelectionAdapter, EventRelay);
   
      CustomSelectionAdapter.prototype.update = function(data) {
              // I vave tried lot of thing but it never work
        }
 return CustomSelectionAdapter;
  });

Don’t know if it 's a bug or a lack of documentation

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5

github_iconTop GitHub Comments

3reactions
cyriluscommented, Apr 1, 2018

Ok I manage to find the way to do it Here is a complete example I hope it ca help someone

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" >

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" >

<script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
		
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js"> </script>

<script type="text/javascript">		
$(document).ready(function() {

    $.fn.select2.amd.define("CustomSelectionAdapter", [
            "select2/utils",
            "select2/selection/multiple",
            "select2/selection/placeholder",
            "select2/selection/eventRelay",
            "select2/selection/search",

        ],
        function(Utils, MultipleSelection, Placeholder, EventRelay, SelectionSearch) {

            var adapter = Utils.Decorate(MultipleSelection, Placeholder);
            adapter = Utils.Decorate(adapter, SelectionSearch);
            adapter = Utils.Decorate(adapter, EventRelay);


            adapter.prototype.render = function() {


                var $search = $(
                    '<li class="select2-search select2-search--inline">' +
                    '<input class="select2-search__field" type="search" tabindex="-1"' +
                    ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
                    ' spellcheck="false" role="textbox" aria-autocomplete="list" />' +
                    '</li>'
                );

                this.$searchContainer = $search;
                this.$search = $search.find('input');
                let $selection = MultipleSelection.prototype.render.call(this);
                this._transferTabIndex();
                return $selection;

            };

            adapter.prototype.update = function(data) {
                this.clear();
		maxViewAll = this.options.options.maxViewAll || 3
                if (data.length < maxViewAll) {
                    if (data.length === 0) {

                        this.$selection.find('.select2-selection__rendered')
                            .append(this.$searchContainer);
                        return;
                    }

                    var $selections = [];

                    for (var d = 0; d < data.length; d++) {
                        var selection = data[d];
                        var $selection = this.selectionContainer();
                        var formatted = this.display(selection, $selection);
                        $selection.append(formatted);
                        $selection.prop('title', selection.title || selection.text);
                        $selection.data('data', selection);
                        $selections.push($selection);
                    }
                    var $rendered = this.$selection.find('.select2-selection__rendered');
                    Utils.appendMany($rendered, $selections);
                } else {

                    var $selection = $(
                        '<li class="select2-selection__choice"></li>'
                    );

                    $selection.append(data.length + this.options.options.renderMaxViewAll || "Selected elements");
                    var $rendered = this.$selection.find('.select2-selection__rendered');
                    Utils.appendMany($rendered, $selection);


                }
                var searchHadFocus = this.$search[0] == document.activeElement;
                this.$search.attr('placeholder', '');
                this.$selection.find('.select2-selection__rendered')
                    .append(this.$searchContainer);
                this.resizeSearch();
                if (searchHadFocus) {
                    this.$search.focus();
                }




            };

            return adapter;
        });



    $('.js-example1-basic-multiple').select2({
	   maxViewAll : 3,
	   renderMaxViewAll: " éléments sélectionnés", 
        selectionAdapter: $.fn.select2.amd.require("CustomSelectionAdapter"),
    });


});
</script>

	</head>

<body>

  <p style="width: 400px;">
    <select style="width: 400px;" class="js-example1-basic-multiple js-states form-control select2-hidden-accessible" multiple="" data-select2-id="1" tabindex="-2" aria-hidden="true">
    <option value="1" data-select2-id="3" selected>NORD</option>
    <option value="2" data-select2-id="4" selected>SUD</option>
    <option value="4" data-select2-id="6" selected>EST</option>
    <option value="3" data-select2-id="7">OUEST</option>
</select>  </p>

</body></html>
0reactions
cyriluscommented, Mar 27, 2018

Sorry to bother again but with this code

$.fn.select2.amd.define("CustomSelectionAdapter", [
    "select2/utils",
    "select2/selection/multiple",
    "select2/selection/placeholder",
    "select2/selection/eventRelay",
    "select2/selection/search",

  ],
  function(Utils, MultipleSelection, Placeholder, EventRelay, SelectionSearch) {

   var adapter = Utils.Decorate(MultipleSelection, Placeholder);
   adapter = Utils.Decorate(adapter,SelectionSearch);
   adapter = Utils.Decorate(adapter, EventRelay);
 

   adapter.prototype.render = function() {
        let $selection = MultipleSelection.prototype.render.call(this);
        return $selection;
        };

adapter.prototype.update = function (data) { 
    console.log("aaa");
    this.clear();
    if (data.length === 0) {
      return;
    }
    var $selections = [];
    for (var d = 0; d < data.length; d++) {
      var selection = data[d];
      var $selection = this.selectionContainer();
      var formatted = this.display(selection, $selection);
      $selection.append(formatted);
      $selection.prop('title', selection.title || selection.text);
      $selection.data('data', selection);
      $selections.push($selection);
    }
    var $rendered = this.$selection.find('.select2-selection__rendered');
    Utils.appendMany($rendered, $selections);
  };

    return adapter;
  });   
        
        

$('.js-example1-basic-multiple').select2({
        selectionAdapter: $.fn.select2.amd.require("CustomSelectionAdapter"),
        });     
        
        
});
</script>

I have this error

jQuery.Deferred exception: Cannot read property 'prop' of undefined TypeError: Cannot read property 'prop' of undefined
    at Select2.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:1889:20)
    at Select2.Observable.invoke (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:655:20)
    at Select2.Observable.trigger (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:645:12)
    at Select2.trigger (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:5493:19)
    at Select2._syncAttributes (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:5415:12)
    at new Select2 (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:5133:10)
    at HTMLSelectElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:6399:26)
    at Function.each (file:///home/user1/www_user1/jquery-3.3.1.min.js:2:2573)
    at w.fn.init.each (file:///home/user1/www_user1/jquery-3.3.1.min.js:2:1240)
    at w.fn.init.$.fn.select2 (https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.js:6396:14) undefined

The error seem to be here

container.on('enable', function () {
     self.$search.prop('disabled', false); // here

     self._transferTabIndex();
   });
Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple selection listview android with custom adapter
Your adapter holds all the items of your list. In your case one instance of such an item should at least contain a...
Read more >
Multiple Item Selection in RecyclerView - Android ... - YouTube
Multiple Item Selection in RecyclerView - Android RecyclerView Tutorial ... RecyclerView Android Example with custom adapter, list sorting ...
Read more >
Android ListView with Custom Adapter Example Tutorial
In this tutorial we'll use a CustomAdapter that populates the custom rows of the Android ListView with an ArrayList . Also to enhance...
Read more >
Extending Select2 with Adapters - Bojan Veljanovski
Example: Custom multiple select · Ability to search items from a dedicated search box, shown in the dropdown (same as in single select)....
Read more >
Core options - History of Romney Marsh
This is only required when a custom adapter is being used, as Select2 will build ... or be shown when no options are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Versions newer than v4.0.3 seem to have issues when destroy/cloning select2's

Next page

Select event is not trigger if clicked on selected item