Highlight Select2 drop-down on focus text input

Question

I have a form with one text input and one select2 element (version 4.0.0). I want, when focus on text input, select2 is open.

Here is what I tried:

<select list="userAccountsMap.values" listKey="accountNo" listValue="accountNo"/>
<input id="destinationAccount" type="text" name="destinationAccount">

<script type="text/javascript">

('select').each(function( index ) {
         $(this).select2();
     }
});

$("#destinationAccount").focus(function () {    
   $("select").trigger('select2:open');
});

</script>

But this is not work. See the fiddle here: http://jsfiddle.net/Hatamikhah/73wypp1w/1/

I don’t understand what my problem is.

Answer 1

They explained an example of how to open a drop-down list.

Documentation URL: https://select2.imtqy.com/examples.html and check the section Programmatic access.

HTML part:

<select id="e1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 
<br>
<br>
<input type="text" id="nameID" name="firstname">

jQuery part:

$("#e1").select2();

// With change event
$("input").on("change", function () {
    $("#e1").select2("open");
});

// With focus event 
$( "input" ).focus(function() {
  $("#e1").select2("open");
});

Try this example with the onChange event: http://jsfiddle.net/mananpatel/73wypp1w/5/

, :)

Answer 2

,

  $ ( "input" ). on ( "change", function() {       $ ( "# E1" ) 2 ( "" ).   });

,

$("input").on("click", function () {
    $("#e1").select2("open");
});