Replace single questions dropdown by plugin

Description

When viewed in dropdown layout of both Single and Single grid question. There are 3 problems in this case:
• Some characters on keyboard decode/encode problem. Such as: Ampersand ( & ), single quotation  ( ' ), double quotation marks ( " ), is more than ( > ), is less than ( < ).
• Same problem with characters not on keyboard. For example: ÷, ×, ±, ≠, ≡, ≤, ≥, …, ‘, °C and maybe more than that.
• Problem with display HTML format in dropdown list when using it to design UI.

Expectation

These decode/encode problems will be fix and display normally like other question type and layout.

Example

Before:

After: File:After-replace.PNG

Solution

Replace select dropdown default by plugin 'select2'.
URL: https://select2.org/

Code

Add this code to Javascript editor in both single or single grid dropdown layout.

Question.bind('afterShowQuestion', function(ev, question, $el) {<br> $.when(<br>  $.fn.select2 || $.ajax({<br>   type: 'GET',<br>   dataType: 'script',<br>   cache: true,<br>   url: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js'<br>  }),<br>  $.fn.select2 || $('<link/>', {rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css'}).appendTo('head')<br> ).done(function() {<br>  $('select', $el).select2({<br>   minimumResultsForSearch: Infinity,<br>   width: '100%',<br>   templateResult: function(state) {<br>    //custom option template in dropdown<br>    if (!$(state.element).instance()) return null;<br>    return $('<div/>').html(state.text).css({'text-align': 'left'});<br>   },<br>   templateSelection: function(state) {<br>    //custom selected value<br>    if (!$(state.element).instance()) return question.selectText;<br>    return $('<div/>').html(state.text).css({'text-align': 'left'});<br>   }<br>  });<br>  $('.select2-selection', $el).css({height: 'auto', 'min-height': '28px'});<br> });<br>});