Select2 4.0 - Keypress不会触发选择

Question

I've upgraded Select2 from version 3.5.2 to version 4.0.

We have plenty of forms with many fields filled in by typists.

In the old version ( 3.5.2 ) the typists would use the following sequence:

1. Focus on the element
2. Type a number
3. Press Tab to both select the result and move on to the next field

 $("select").select2(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> <style> input { display:block; margin:10px 0; } </style> <input type=text/> <select> <option value="1">1. Option A</option> <option value="2">2. Option B</option> <option value="3">3. Option C</option> <option value="4">4. Option D</option> <option value="5">5. Option E</option> </select> <input type=text/> 

On version 4.0 the typists must:

1. Focus on the element
2. Hit Enter
3. Type the number
4. Press Enter again
5. Press tab to blur and move to the next field

 $("select").select2(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> <style> input { display:block; margin:10px 0; } </style> <input type=text/> <select> <option value="1">1. Option A</option> <option value="2">2. Option B</option> <option value="3">3. Option C</option> <option value="4">4. Option D</option> <option value="5">5. Option E</option> </select> <input type=text/> 

Is there a way around this apparent downgrade in functionality? I don't want to resort to v3.5.2 because I'm using AJAX on <select> elements which is not supported in this version (one must use hidden <input> tag instead)

Answer 1

To trigger the opening of select2 on focus use jQuery's native "focus" event & select2 "open" event. Important: Make it on DOM is ready.

 $( document ).ready(function() { $(".select2-selection").on("focus", function () { $(this).parent().parent().prev().select2("open"); }); });