When using select2 (v 4.0) in the jquery user interface dialog, how can I get the allowClear parameter to work when using a remote data source?

Question

I use select2 dropdown and just upgraded to version 4. One function that seems to be violated (or I'm doing something wrong) is the allowClear parameter when you have a remote data source. And select2 sits in the jquery user interface dialog

It works fine if the data source is local (no ajax) or if there is no jquery UI dialog box, but when I try to use the remote data source in the jquery user interface dialog box, I see problems.

Interestingly, when seetting allowClear = true, "X" DOES is displayed on the right side of the drop-down list after I find the search and select the item, but when I click it, all of the select2 code works, but the previous selected value is not deleted. I was debugging select2.js code, and all the code that seems like it should be running (handleClear, etc.) seems to work properly.

When testing in a local example, I see that this line of code actually removes the value:

this.$element.val(this.placeholder.id).trigger('change'); 

when I debug the same code on a remote data source, nothing changes when this line of code fires.

From googling, the only related problem that I see if you did not specify placeholder text ( example question here ) but in my case (as indicated below) I indicate this

Here are some screenshots:

and here is my code below that sets this select2 dropdown menu:

asp.net-MVC View:

  <% = Html.DropDownList("MyDropdownId", Model.DropdownItems, new {@id = "MyDropdown"}) %><br/><br/> 

and here is my javascript:

 $("#MyDropdown").select2({ theme: "classic", width: "280px", allowClear: true, ajax: { url: "/MyController/Search", dataType: 'json', delay: 300, data: function (params) { return { q: params.term }; }, processResults: function (data, params) { return { results: data }; }, cache: false }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 3, placeholder: "Search", templateResult: streamFormatResult, templateSelection: streamSelectionResult }); 

Has anyone else encountered this problem or can understand why clicking on the "X" in the select2 drop-down menu with a remote data source will not eliminate the previously selected selection?

Update

Given Kevin's answer below, the problem seems to be isolated from the fact that my select2 selection is in the jquery user interface dialog box (as if I was trying to use it on a regular page, it works properly)

the only other code I had to add (to get select2 working in the jquery user interface dialog) was this code:

 if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) { var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction; $.ui.dialog.prototype._allowInteraction = function (e) { if ($(e.target).closest('.select2-dropdown').length) return true; return ui_dialog_interaction.apply(this, arguments); }; } 

Without the code above, select2 input is not editable. I am not sure if this causes the problem to not clear the previous selected value when I click on "X".

Answer 1

When using a placeholder with a single choice, you should always specify <option></option> for it , even if you use a remote data source. This is because Select2 needs a value to set the selection (usually an empty string), and the only way it can do this is with the placeholder option.

A simple solution, if you have access to HTML, is to add a <option> space in the <select> .

 <select> <option></option> </option> 

You can even add useful text to it that will be displayed to users, value just needs to be an empty string

 <select> <option value="">Select an option</option> </select> 

Now, some frameworks automatically generate <select> for you. Fortunately, most of them provide you with the ability to define an “empty” or “placeholder” for you. And if for some reason the infrastructure is not working, you can usually add a new option to the list of parameters that you pass to the infrastructure.

For ASP.NET MVC, you need to control the placeholder option by passing another Html.DropDownList argument .

 <% = Html.DropDownList("MyDropdownId", Model.DropdownItems, "Select an option", new {@id = "MyDropdown"}) %> 

And that should generate an empty placeholder at the top of the parameter list.

Now, for some frameworks, the placeholder option must have a value other than an empty string. Select2 supports setting a custom value placeholder by passing data to the object instead of the string for placeholder .

So, for HTML that looks like

 <select> <option value="-1">Select an option</option> </select> 

You must initialize Select2 using the following code for placeholder

 $('select').select2({ placeholder: { id: '-1', text: 'Custom placeholder text' } }); 

Here is an example of a remote data source (in this case it’s mocking), working with placeholder and allowClear . Keep in mind that you do not need to install ajax.transport , this is only necessary because we are not actually making a remote request.

 $('.js-states').select2({ placeholder: { id: "-1", text: "Select a state..." }, allowClear: true, ajax: { url: "/MyController/Search", dataType: 'json', delay: 300, data: function (params) { return { q: params.term }; }, processResults: function (data, params) { return { results: data }; }, cache: false, transport: function (params, success, failure) { var term = params.data.q || ""; // mock response var response = [ { id: "AK", text: "Alaska" }, { id: "AL", text: "Alabama" }, { id: "AZ", text: "Arizona" }, { id: term || "nothing", text: term || "" } ]; success(response); } } }); 

 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> <select class="js-states" style="width: 50%"> <option value="-1">Select a state</option> </select>