CODEWITHSUNDEEP
jqueryjquery-select2
Shahid Thaika
Shahid Thaika

Reputation: 2305

Clear selection when Select2 uses minimumInputLength

I have a select input field that I am enhancing using Select2 jQuery plugin. I passed the minimumInputLength property to have the user type a few letters before populating matching items. However, I am not sure how a user can clear the selection, if required.

I tried to pass the allowClear property, and while it does show an 'X', the button does not work and the selection remains.

EDIT:

jsfiddle link: https://jsfiddle.net/8f1u48et/

Upvotes: 1

Views: 9025

Answers (2)

HiDeoo
HiDeoo

Reputation: 10563

You need to define a placeholder property when initializing your Select2 jQuery plugin. It is required by the plugin.

The updated code would look like:

$('#members').select2({
  minimumInputLength: 3,
  allowClear: true,
  placeholder: ''
});

You can check a working example on this JSFiddle. When you have something selected, clicking on the clear button will remove the current selection.

Regarding the fact that the placeholder is required with this plugin, there is a section of the documentation dedicated to this question, but at the moment, it's not been answered yet...

If you need more control over what is going on, a list of the events that Select2 will trigger during the lifecycle of the components is available in the documentation.

For example, to attach a listener to the unselecting event which is triggered before a selection is removed (like when you click the clear button), you'll use:

$('#members').on('select2:unselecting', function (evt) {
  // Do something...
});

There is also an annoying bug where Select2 will incorrectly toggles the dropdown menu when clearing and removing selections.

The issue is documented on their Github but not closed and fixed yet. Many workarounds are available in this thread like canceling the select2:opening/closing events that occur immediately after a select2:unselect event:

var $element = $('#members');

$element.on('select2:unselect', function() {
  function cancelAndRemove(event) {
    event.preventDefault()
    removeEvents()
  }
  function removeEvents() {
    $element.off('select2:opening', cancelAndRemove)
    $element.off('select2:closing', cancelAndRemove)
  }
  $element.on('select2:opening', cancelAndRemove)
  $element.on('select2:closing', cancelAndRemove)
  setTimeout(removeEvents, 0)
});

Upvotes: 7

gaetanoM
gaetanoM

Reputation: 42054

You may use select2:unselecting event so that when the user click the X the value selected is removed and the select2 panel is no more opened:

$(function () {
  $('#members').select2({
    placeholder: "Select a member",
    minimumInputLength: 3,
    allowClear: true
  });

  // when you click on the X....
  $('#members').on('select2:unselecting', function(e) {
    // prevent the default action
    e.preventDefault();
    
    // deselect....
    $('#members').val('');
    
    // inform select2 of deselecting....
    $('#members').trigger('change.select2');
  })
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="members" style="width: 100%;">
    <option value="">&nbsp;</option>
    <option value="300001">Daniel Akaka Kahikina</option>
    <option value="300002">Lamar Alexander</option>
    <option value="300003">Wayne Allard A.</option>
    <option value="300004">George Allen Felix</option>
    <option value="300005">John Smith</option>
</select>

Upvotes: 0

Related Questions