## Working Code for v4.0+ <sup><sup>*(*including 4.0.7)*</sup></sup>

The following code will open the menu on the *initial* focus, but won't get stuck in an infinite loop when the selection re-focuses after the menu closes.

```js
// on first focus (bubbles up to document), open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
  $(this).closest(".select2-container").siblings('select:enabled').select2('open');
});

// steal focus during close - only capture once and stop propogation
$('select.select2').on('select2:closing', function (e) {
  $(e.target).data("select2").$selection.one('focus focusin', function (e) {
    e.stopPropagation();
  });
});
```

## Explanation

### Prevent Infinite Focus Loop

**Note**: The `focus` event is *fired twice*

1. Once when tabbing into the field
2. Again when tabbing with an open dropdown to restore focus

![focus menu states][1]

We can prevent an infinite loop by looking for differences between the types of focus events.  Since we only want to open the menu on the initial focus to the control, we have to somehow distinguish between the following raised events:

[![event timeline][2]][2]

Doing so it a cross browser friendly way is hard, because browsers send different information along with different events and also Select2 has had many minor changes to their internal firing of events, which interrupt previous flows.  

One way that seems to work is to attach an event handler during the [`closing`][15] event for the menu and use it to capture the impending `focus` event and prevent it from bubbling up the DOM.  Then, using a delegated listener, we'll call the actual focus -> open code only when the `focus` event bubbles all the way up to the `document`


### Prevent Opening Disabled Selects

As noted in this github issue [#4025 - Dropdown does not open on tab focus][4], we should check to make sure we only call `'open'` on `:enabled` select elements like this:



<pre><code>$(this).siblings('select<b>:enabled</b>').select2('open');</b></code></pre>

### Select2 DOM traversal

We have to traverse the DOM a little bit, so here's a map of the HTML structure generated by Select2

[![Select2 DOM][5]][5]

### Source Code on GitHub

Here are some of the relevant code sections in play:

[`.on('mousedown'` ... `.trigger('toggle')`][10]  
[`.on('toggle'`  ... `.toggleDropdown()`][6]   
[`.toggleDropdown` ... `.open()`][7]  
[`.on('focus'` ... `.trigger('focus'`][11]  
[`.on('close'` ... `$selection.focus()`][12]  

It used to be the case that opening select2 fired twice, but it was fixed in [Issue #3503][8] and that should prevent some jank

[PR #5357][13] appears to be what broke the previous focus code that was working in 4.05

### [Working Demo in jsFiddle][9] & Stack Snippets:





    $('.select2').select2({});

    // on first focus (bubbles up to document), open the menu
    $(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
      $(this).closest(".select2-container").siblings('select:enabled').select2('open');
    });

    // steal focus during close - only capture once and stop propogation
    $('select.select2').on('select2:closing', function (e) {
      $(e.target).data("select2").$selection.one('focus focusin', function (e) {
        e.stopPropagation();
      });
    });



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>

    <select class="select2" style="width:200px" >
      <option value="1">Apple</option>
      <option value="2">Banana</option>
      <option value="3">Carrot</option>
      <option value="4">Donut</option>
    </select>



Tested on Chrome, FF, Edge, IE11




  [1]: https://i.stack.imgur.com/WrHwd.gif
  [2]: https://i.stack.imgur.com/6PLVr.png
  [3]: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
  [4]: https://github.com/select2/select2/issues/4025
  [5]: https://i.stack.imgur.com/1NAg3.png
  [6]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.full.js#L5290
  [7]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.full.js#L5496
  [8]: https://github.com/select2/select2/issues/3503
  [9]: https://jsfiddle.net/KyleMit/hbeon3g2/
[10]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/single.js#L41
[11]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/base.js#L46
[12]: https://github.com/select2/select2/blob/4.0.7/src/js/select2/selection/base.js#L84
[13]: https://github.com/select2/select2/pull/5357
[15]: https://select2.org/programmatic-control/events

I have a form with multiple text inputs and some select2 elements. 
Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing.
I was wondering if it is possible to open the dropdown when the Select2 element gets focus.

Here's what I've tried so far:

    $("#myid").select2().on('select2-focus', function(){
         $(this).select2('open');
    });

But using this code makes the dropdown to open again after a selection is made. 


Select2 open dropdown on focus

Here's a [similar question on preventing flickering with Bootstrap-Select][1].

The fact is that a [Flash of Unstyled Content (FOUC)][3] is going to happen anytime that JavaScript is running on the client after the page has rendered and changes the appearance of the page.  You're best bet is to just minimize the changes ahead of time.

The heavy handed approach would be to wait to display the page until all the scripts have run, but this is much worse for users. 

As [Roryok suggested][2], the best way to mitigate this issue is to style the appearance of the native element as close as possible to the plugin control.

To do that, just add the following css to any select element which will be applied before the javascript renders the control.

```css
/* apply styles to original select element before hidden */
select.select2{
  color: #444;
  background-color: #FFF;
  border: 1px solid #AAA;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 28px;
  padding-left: 5px;
  font: unset;
}
```

### Demo in Stack Snippets





    $('.select2').select2();



    body {
      display: flex;
      flex-direction: row;
    }

    div {
      padding: 15px;
      display: flex;
      flex-direction: column;
    }

    label {
      font-weight: bold;
    }

    select {
      min-width: 150px;
    }

    .select2-theme {
      color: #444;
      background-color: #FFF;
      border: 1px solid #AAA;
      border-radius: 4px;
      box-sizing: border-box;
      cursor: pointer;
      display: block;
      height: 28px;
      padding-left: 5px;
      font: unset;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.js"></script>


    <div >
      <label>Select 2</label>
      <select class="select2">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>

    </div>

    <div>
      <label>Select2 Themed</label>
      <select class="select2-theme">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>

    <div>
      <label>Default Select</label>
      <select >
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>  
    </div>





[1]: https://stackoverflow.com/q/23251488/1366033
[2]: https://stackoverflow.com/questions/29849666/#comment47825566_29849666
[3]: http://en.wikipedia.org/wiki/Flash_of_unstyled_content

I'm using bootstrap on a site, and using the following code on load to turn my select boxes into [select2][1] dropdowns

    $("select").select2();

However when any page with a select dropdown loads, there's a brief delay where the original can be seen before the select2 replacement is drawn in. This is quite jarring as elements of the forms on my pages move around. 

Is there a way to generate the select2 HTML in my backend (ASP MVC3) and write it out to the page in such a way that the select2 plugin will still hook up all the behaviours correctly? 

[1]: https://select2.github.io/

Counteract a bootstrap / select2 rendering delay?

### Problem

If you're executing `$("#select2_content").select2({})` on the initial page load then `#select2_content` doesn't exist yet.  So the jQuery expression doesn't find anything and consequently will never initialize the select box.  Then it will never run again.

### Solutions

You can do either of the following:

1. When you've finished loading the modal via ajax, you need to tap into the [`loaded.bs.modal` event][7] and run a function to initialize select2 on any new elements.

2. Or you can pull in the function via a `<script>` tag in the ajax call that will be executed when the DOM parses the code brought in over ajax.  Just make sure to add the script tag at the end or wrap the javascript in a document ready function otherwise it still won't exist in the dom.

### Option 1

[Here's a plunker][4] that returns the following code:

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
      </div>
      <div class="modal-body">
        <select id="select2_content" class="form-control select2">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

For ajax calls, you can access a running version of it at the following url: 
 
[http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/][5]

[Here's a plunker][6] that consumes the AJAX call with the following code:

    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Bootstrap Modal AJAX Demo</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <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/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
        <script>
          $(function(){
            $('#ajax').on('loaded.bs.modal', function (e) {
              $("#select2_content").select2({
               allowClear: true
              });
            })
            .modal({
              show: false,
              remote: 'http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/'
            });
          });
        </script>
      </head>
    
      <body>
        
        <btn data-target="#ajax" data-toggle="modal" class="btn btn-primary">
          Load Select
        </btn>
        
        <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content"></div>
           </div>
        </div>
        
      </body>
    
    </html>




### Option 2

[Here's a plunker][1] that returns the following code:

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">AJAX Modal</h4>
      </div>
      <div class="modal-body">
        <select id="select2_content" class="form-control select2">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <script>
      $("#select2_content").select2({
       allowClear: true
      });
    </script>

For ajax calls, you can access a running version of it at the following url: 
 
[http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/][2]

[Here's a plunker][3] that consumes the AJAX call with the following code:

    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Bootstrap Modal AJAX Demo</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
        <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/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
      </head>
    
      <body>
        
        <a href="http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/"
           data-target="#ajax" data-toggle="modal" class="btn btn-primary">
          Load Select
        </a>
        
        <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
           <div class="modal-dialog">
              <div class="modal-content"></div>
           </div>
        </div>
        
      </body>
    
    </html>



[1]: http://plnkr.co/edit/lpyMAERThlKeNieoX8GH?p=preview
[2]: http://run.plnkr.co/plunks/lpyMAERThlKeNieoX8GH/
[3]: http://plnkr.co/edit/wnxXGmz89fCbKoJiV0ET?p=preview

[4]: http://plnkr.co/edit/bq15voV79PEz07TWrS8D?p=preview
[5]: http://run.plnkr.co/plunks/bq15voV79PEz07TWrS8D/
[6]: http://plnkr.co/edit/xLhImsALFIBGGVOo4sii?p=preview

[7]: http://getbootstrap.com/javascript/#modals-events

I'm loading a [Bootstrap Modal][1] with AJAX. The result modal works perfectly, but the [Select2][2] box that gets loaded in does not initialize.

How can I fix it?

### Here's my code:

**index.php** (html):



    <a href="content.php" data-target="#ajax" data-toggle="modal" class="btn green">
      Load Select
    </a>

    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content"></div>
       </div>
    </div>

**index.php** (js):



    $("#select2_content").select2({
       allowClear: true
    }); 


**content.php**:



    <select name="content" id="select2_content" class="form-control select2">
      <option value="A">A</option>
        ...
      <option value="Z">Z</option>
    </select>


[1]: http://getbootstrap.com/javascript/#modals
[2]: https://select2.github.io/

Error loading jQuery select2 when using jquery Bootstrap modal with ajax loaded content

I think it is the `.select2-selection__rendered` element that needs some tweaking.
How about something like this ?

    .select2-selection--single {
      height: 100% !important;
    }
    .select2-selection__rendered{
      word-wrap: break-word !important;
      text-overflow: inherit !important;
      white-space: normal !important;
    }

-----





    $('.select2').select2();



    .select2-selection--single {
      height: 100% !important;
    }
    .select2-selection__rendered{
      word-wrap: break-word !important;
      text-overflow: inherit !important;
      white-space: normal !important;
    }



    <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="select2" style="width:100px">
      <option value="AL">Really long name that normally wouldn't be visible</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
    </select>



### Update 
`!important` is not required. Thanks to @KyleMit for pointing it out.

How can I get the selected text in [Select2][1] to wrap instead of using an ellipsis?  The option items wrap, but I'd like the input field to be able to expand down instead of over.

**Here's an example**:





    $('.select2').select2();



    <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="select2" style="width:100px">
      <option value="AL">Really long name that normally wouldn't be visible</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
    </select>




By default [Select2 adds the following code][2]:



    .select2-selection--single {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

However, removing these properties doesn't do the trick because they are still nested in other containers.

[1]: https://select2.github.io/
[2]: https://github.com/select2/select2/blob/master/src/scss/_single.scss

Wrap selected text with Select2

Select2 will store all the information it uses on the original select element.  You can access the following information by calling `.data('select2')` on the original element:

[![Select2 Data][1]][1]

From there, you can access the `$container` property to identify the container in the DOM and add the class to that like this:



    var $select2 = $('select.select2').select2()

    $select2.data().select2.$container.addClass("wrap")

### Here's a demo in Stack Snippets






    var $select2 = $('select.select2').select2()
    $select2.data().select2.$container.addClass("wrap")



    body .select2.narrow {
        width: 200px;
    }
    body .wrap .select2-selection--single {
        height: 100%;
    }
    body .select2-container.wrap .select2-selection--single .select2-selection__rendered {
        word-wrap: break-word;
        text-overflow: inherit;
        white-space: normal;
    }




    <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.full.js"></script>

    <select class="select2 narrow wrap">
      <option value="AL">Really long name that normally</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
    </select>






  [1]: http://i.stack.imgur.com/tmf3A.png

This is very similar to this question on how to [add class to select2 element][1], however the answers there appear to target earlier versions of the framework which has undergone some breaking changes in v4.0

According to this [issue to add an additional custom class to select2-container][2], there were several undocumented properties you could pass to the select2 constructor, including: `containerCss`, `containerCssClass`, `dropdownCss`, and `dropdownCssClass`.

However in version 4 when I run the following code:

    $('.select2').select2({
        containerCss: "wrap"
    });

I get the following error:

> Uncaught Error: No select2/compat/containerCss

How can I pass a class to Select2 in v4.0?

**Here's an example in StackSnippets**:





    $('.select2').select2({
        containerCss: "wrap"
    });



    <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="select2 narrow wrap">
      <option value="AL">Algebra</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
    </select>



[1]: https://stackoverflow.com/q/15028995/1366033
[2]: https://github.com/select2/select2/issues/285

How to add class to select2 element in v4.0

No. There is no way to extend content outside of an iframe. Think of it as another browser window entirely. 

The reason that the options will extend below the iframe is that form elements follow their own rules. They differ from browser to browser, and for some of the elements you can't change the styling. When you use select2 it turns the form into a regular element (not a default form element), so you can manipulate the style. Unfortunately, this also makes it confine to the iframe.

Consider that a browser can also do this (*but it doesn't mean you can*):

[![Example](http://i.imgur.com/xcbN5UH.png)](http://run.plnkr.co/plunks/kALp3qUudQ4UHBWvEFbA/select.html)

Is it possible to extend content beyond the bounds of an iframe?

In my case, I was formerly rendering a native `<select>` control inside of an iframe.  As a native control, when it rendered, the dropdown was able to occupy space outside of the iframe.  I recently converted the dropdown to use [select2][select2], which rebuilds the dropdown using various `<span>` elements.

The problem is now it gets cutoff within the `<iframe>`:

[![Demo][screenshot]][run.plunk]

I've tried setting the overflow to visible, but that doesn't work:



    iframe {
       overflow: visible
    }

### [Here's a Test Case on Plunker][plunk]

**JavaScript**:



    $("#OpenSelect2").click(function(){
     OpenPagePopup("select2.html", "Select 2", 150, 400);
    });

    //Open Diagnosis Control for editting
    function OpenPagePopup(location, title, ht, wt) {
      $('<div>')
          .append($('<iframe/>', {
              'class': "fullFrame",
              'src': location
          }))
          .dialog({
              autoOpen: true,
              modal: true,
              height: ht,
              width: wt,
              title: title
          });
    }


**index.html**:



    <button id="OpenSelect2">Open Modal with Select2</button>

**select2.html**:



    <select class="select2">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
    </select>
    
    <script >
      $('.select2').select2();
    </script>

### Possible Workaround:

**DON'T USE IFRAMES**! Yeah, I know, I know, but this is the [situation][SO1] I find myself maintaining.

[screenshot]: http://i.imgur.com/S6PvAaA.png
[plunk]: http://plnkr.co/edit/kALp3qUudQ4UHBWvEFbA/
[run.plunk]: http://run.plnkr.co/plunks/kALp3qUudQ4UHBWvEFbA/

[select2]: https://select2.github.io/
[SO1]: https://stackoverflow.com/a/14021220/1366033

Extend div outside bounds of iFrame?

> Uncaught TypeError: $(...).select2 is not a function

The error above happening because you haven't included the JavaScript for Select2, as identified in the comments.  The atmosphere [package you linked to][1] is just for providing Bootstrap-esque styling *on top of* the existing Select2 package.

You should also include [`meteor add natestrauser:select2`][2]

The next problem you may run into is that when the JavaScript runs, `<select class="input" >` might not be loaded into the DOM so `$("#clientName")` won't find anything.  To wait to initialize Select2 until the page is loaded, you should wrap the code in the jQuery's DOM ready function `$(function(){});` and wrap that in the `Meteor.Startup()` for good measure like this:



    Meteor.startup(function () {
      $(function(){
        $("#clientName").select2();
      });
    });

### [Working Demo in Meteorpad][3]

**Further Reading**:

* [How to run JQuery code when document is ready in Meteor?][4]

[1]: https://atmospherejs.com/zimme/select2-bootstrap3-css
[2]: https://atmospherejs.com/natestrauser/select2
[3]: http://meteorpad.com/pad/pHc7QwybBz6wXBRsg/Select2
[4]: https://forums.meteor.com/t/3121

can someone explain to me how select2 works with Meteor? I am using [zimme:select2-boostrap3-css](https://atmospherejs.com/zimme/select2-bootstrap3-css) and I have no clue on how to use it.

I checked both the original [select2 github page](http://select2.github.io/select2/) and the one from the [package](https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3). The first one explains how to use it without Meteor.

Do I just add the jQuery code to one of my *.js-files in order to get it to work?

In HTML:

    <select class="input" id="clientName" name="clientName">
        {{#each getClients}}
            <option value="{{clientName}}" data-id={{_id}}>{{clientName}}</option>
        {{/each}}
    </select>

In JS:
    
    $("#clientName").select2();

Because this doesn't work.

When loading my page I get this error `Uncaught TypeError: $(...).select2 is not a function`.

How to use select2 with Meteor?

You can manually implement this functionality by listening for keypress events, searching the dropdown list of items, and simulating a selection by triggering the mouseenter event on that item.

1. Since it's hard to attach a keypress handler to the dynamic `<span>` that Select2 generates.  We can listen to keypress events on the body that occured on a contain that has both `--open` and `--focus`
2. Then we'll need to convert the [keypress event char code into a alphanumeric character][1]
3. Select2 will automatically [handle most special characters][2] like <kbd>↑↓</kbd> and <kbd>Enter</kbd>, but we'll proceed if we see a letter like this `/[a-z]/i.test(char)`
4. HTML Dropdowns searches kind of work in a wonky way.  As soon as any character is pressed, it'll find that element, but you can also string together multiple key in quick succession to narrow down the focus even more.  So we'll set a [delayed timeout][3] that will refresh the clock every time it's called, but will clear the temporary search string after 750 ms.
5. Then we'll crosswalk from the current element to find the `$results` dropdown and all of the `.select2-results__option` items inside it.
6. Starting from the top, we'll test each one to see if the start of the option text is a case insensitive match for our current search string
7. If so, we'll fire the mouseenter event, which is [used elsewhere to highlight result items][4]

All told, it'll look like this:



    // https://stackoverflow.com/a/1909508/1366033
    var delay = (function () {
      var timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();  
    
    // if we have focus and the container is open, it means we're not in the search field
    $("body").on('keydown', '.select2-container--focus.select2-container--open',
                 function(e) {
      // get char https://stackoverflow.com/a/34711175/1366033
      var char = e.key
    
      // only accept a range of characters
      if (/^[a-z]{1}$/i.test(char)) {
    		  // select2 handles others https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L5368
          
        var $this = $(this); // need inside delay
    
        // act immediately but temporarily store a run of characters
        delay(function () {
          // clear search text on delay
          $this.data("searchText", "");
        }, 750);
    
        // build search string with any previous characters and store new value
        var previous =  $this.data("searchText");
        var searchText = (previous === undefined ? "" : previous) + char;
        $this.data("searchText", searchText);
        console.log(searchText);
    
    		// find available options
        var $sel2 = $this.data("element");
        var $select2 = $sel2.data("select2");
        var $results = $select2.results.$results;
    		var $opts = $results.find(".select2-results__option");
        
        // find first option with matching start and select it
        $opts.each(function(i,el) {
          var $opt = $(el)
          var optText = $opt.text()
          var startsWithRegex = new RegExp('^' + searchText, 'i');
          var match = startsWithRegex.test(optText)
    
    			// if we got one - fire event and we can leave
          if (match) {
            // mouseenter is a reliable way to highlight item in results list
            // https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L1234
            $opt.trigger('mouseenter');
            return;
          }
          
          // if we found nothing, previous selection will stay highlighted
        })
      }
    });


### Working Demo in StackSnippets & [jsFiddle][5]:






    $('#select2').select2({
      minimumResultsForSearch: 20,
    });
    $('#select2search').select2();

    // https://stackoverflow.com/a/1909508/1366033
    var delay = (function () {
      var timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();  

    // if we have focus and the container is open, it means we're not in the search field
    $("body").on('keydown', '.select2-container--focus.select2-container--open',
                 function(e) {
      // get char https://stackoverflow.com/a/34711175/1366033
      var char = e.key

      // only accept a range of characters
      if (/^[a-z]{1}$/i.test(char)) {
    		  // select2 handles others https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L5368
          
        var $this = $(this); // need inside delay

        // act immediately but temporarily store a run of characters
        delay(function () {
          // clear search text on delay
          $this.data("searchText", "");
        }, 750);

        // build search string with any previous characters and store new value
        var previous =  $this.data("searchText");
        var searchText = (previous === undefined ? "" : previous) + char;
        $this.data("searchText", searchText);
        console.log(searchText);

    		// find available options
        var $sel2 = $this.data("element");
        var $select2 = $sel2.data("select2");
        var $results = $select2.results.$results;
    		var $opts = $results.find(".select2-results__option");
        
        // find first option with matching start and select it
        $opts.each(function(i,el) {
          var $opt = $(el)
          var optText = $opt.text()
          var startsWithRegex = new RegExp('^' + searchText, 'i');
          var match = startsWithRegex.test(optText)

    			// if we got one - fire event and we can leave
          if (match) {
            // mouseenter is a reliable way to highlight item in results list
            // https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L1234
            $opt.trigger('mouseenter');
            return;
          }
          
          // if we found nothing, previous selection will stay highlighted
        })
      }
    });



    .form-control {
      padding:15px;
    }
    label {
      display:inline-block;
      width:150px;
    }
    select {
      width: 150px;
      border: 1px solid #aaa;
      border-radius: 4px;
      height: 28px;
    }



    <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>

    <div class="form-control">
      <label for="normal">Normal</label>
      <select id="normal" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>

    <div class="form-control">
      <label for="select2">Select2</label>
      <select id="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>

    <div class="form-control">
      <label for="select2search">Select2 + Search</label>
      <select id="select2search" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>



**Working Demo**

[![Working Demo][6]][6]


  [1]: https://stackoverflow.com/a/34711175/1366033
  [2]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L5368
  [3]: https://stackoverflow.com/a/1909508/1366033
  [4]: https://github.com/select2/select2/blob/4.0.5/dist/js/select2.js#L1234
  [5]: https://jsfiddle.net/KyleMit/ua6mLpo7/6/
  [6]: https://i.stack.imgur.com/S8GoJ.gif

In select2, if the search field is [hidden for small results sets][1] or [disabled all together][2], the dropdown field won't navigate between different available options while typing.  

Normally, this need is handled by simply filtering out options that don't match the search criteria, but when search is disabled, this no longer works.  

This seems like a very basic functionality component available in every default `<select>` element.  Is there any implementation of this feature?

Here's an example of what I'm talking about:

**Type to Highlight Demo**:

[![Type to Highlight Demo][3]][3]





### MCVE Demo in StackSnippets & [jsFiddle][4]:





    $('#select2').select2({
      minimumResultsForSearch: 20,
    });
    $('#select2search').select2();




    .form-control {
      padding:15px;
    }
    label {
      display:inline-block;
      width:150px;
    }
    select {
      width: 150px;
      border: 1px solid #aaa;
      border-radius: 4px;
      height: 28px;
    }



    <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>

    <div class="form-control">
      <label for="normal">Normal</label>
      <select id="normal" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>

    <div class="form-control">
      <label for="select2">Select2</label>
      <select id="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>

    <div class="form-control">
      <label for="select2search">Select2 + Search</label>
      <select id="select2search" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>




  [1]: https://select2.org/searching#limiting-display-of-the-search-box-to-large-result-sets
  [2]: https://select2.org/searching#hiding-the-search-box
  [3]: https://i.stack.imgur.com/7L3Dc.gif
  [4]: https://jsfiddle.net/KyleMit/ua6mLpo7/

Type to highlight results in Select2 when minimumResultsForSearch is set

This could be trivially handled by modifying the original [source code on line 323][0] which treats tabs and esc keys identically:



    if (key === KEYS.ESC || key === KEYS.TAB || (key === KEYS.UP && evt.altKey)) {
        self.close();
        evt.preventDefault();
    }

But third party libraries should ideally be modified with a pull request. So we have a couple problems in creating a wrapper for this.  Principally, detecting a <kbd>tab</kbd> `keypress` event is *hard*.  If we catch it too late, another action might have superseded it or it might be fired on another field altogether.

The landscape of capturing tab events and persisting information seems to fall into two buckets:

1. Monitor before tab press and also after closed
2. Intercept tab press and modify synchronously

In either case, we must know that a <kbd>tab</kbd> key was the offending item that caused the menu to close.

If we listen for keypress events with tab, on an open input, they'll either occur from `.select2-selection` if there's no search or `select2-search__field` if search is enabled.



    $("body").on('keydown', e => { if (e.keyCode === 9) console.log(e.target) });

[![Select 2 Tab Events][1]][1]

**However**, if we setup as a delegated handler, as we have above, by the time the event bubbles up all the way up to "body", the menu has already closed, thus clearing the currently highlighted item and even our indicator of whether or not we started as open.

We can intercept *before* the menu closes by registering for the [**`select2:closing`**][2] event like this:



    $("body").on('select2:closing', e => { console.log(e,e.target) });

**However**, select 2 doesn't persist the original event information and instead makes their own new `jQueryEvent`, so we don't yet know if we're closing due to a tab event (the `body.keypress` event fires afterward)

-----

## Solution

We'll monitor the `select2:closing` event and capture what we need to know.  Next we need to attach a handler that listens for the subsequent firing of the initial click or a key stroke as the event pipeline is finished.  We need to fire this **once and only once** for **every** close option. To do so we can use this extension [`$.fn.once`][3].  If it was raised by a tab, it'll update whatever value detected during closing.  If not, that value and handler will disappear.

All told, it should look like this:



    // monitor every time we're about to close a menu
    $("body").on('select2:closing', function (e) {
      // save in case we want it
      var $sel2 = $(e.target).data("select2");
      var $sel = $sel2.$element;
      var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
      var newValue =  $selDropdown.data("data").element.value;
      
      // must be closed by a mouse or keyboard - listen when that event is finished
      // this must fire once and only once for every possible menu close 
      // otherwise the handler will be sitting around with unintended side affects
      $("html").once('keyup mouseup', function (e) {
      
        // if close was due to a tab, use the highlighted value
        var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
        if (e.keyCode === KEYS.TAB) {
          if (newValue != undefined) {
            $sel.val(newValue);
            $sel.trigger('change');
          }
        }
    
      });
      
    });
    
    $.fn.once = function (events, callback) {
        return this.each(function () {
            $(this).on(events, myCallback);
            function myCallback(e) {
                $(this).off(events, myCallback);
                callback.call(this, e);
            }
        });
    };

### Working demo in [jsFiddle][4] and StackSnippets:





    $('.select2').select2({});

    // monitor every time we're about to close a menu
    $("body").on('select2:closing', function (e) {
    	// save in case we want it
    	var $sel2 = $(e.target).data("select2");
      var $sel = $sel2.$element;
      var $selDropdown = $sel2.$results.find(".select2-results__option--highlighted")
      var newValue =  $selDropdown.data("data").element.value;

      // must be closed by a mouse or keyboard - setup listener to see when that event is completely done
      // this must fire once and only once for every possible menu close 
      // otherwise the handler will be sitting around with unintended side affects
      $("html").once('keyup mouseup', function (e) {

        // if close was due to a tab, use the highlighted value
        var KEYS = { UP: 38, DOWN: 40, TAB: 9 }
        if (e.keyCode === KEYS.TAB) {
          if (newValue != undefined) {
            $sel.val(newValue);
            $sel.trigger('change');
          }
        }

      });
      
    });

    $.fn.once = function (events, callback) {
        return this.each(function () {
            $(this).on(events, myCallback);
            function myCallback(e) {
                $(this).off(events, myCallback);
                callback.call(this, e);
            }
        });
    };



    .form-control {
      padding:10px;
      display:inline-block;
    }
    select {
      width: 100px;
      border: 1px solid #aaa;
      border-radius: 4px;
      height: 28px;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

    <div class="form-control">
      <label for="foods2">Select2</label>
      <select id="foods2" class="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>



[0]: https://github.com/select2/select2/blob/4.0.5/src/js/select2/core.js#L323
[1]: https://i.stack.imgur.com/XilM8.png
[2]: https://select2.org/programmatic-control/events
[3]: https://stackoverflow.com/a/24589200/1366033
[4]: https://jsfiddle.net/KyleMit/zo751wv3/64/

This has been the subject of the following *similar* SO Question and several github issues including:

* [**Stack Overflow** - jQuery Select2 Tag on Blur][1]
* [**#4578** - Tab and Esc should select the option][2]
* [**#4820** - TAB should select a result #4820][3]
* [**#3472** - Arrow keys do not change value of select ][4]


*But* the suggested solutions or questions have *treated all blur events equally*, regardless of how they were invoked.  With most answers leveraging [**Automatic selection**][5] by setting [`selectOnClose`][6].

Ideally, clicking off the dropdown (escaping) after merely hovering over options should not change the value:

[![SelectOnClose violation of principle of least surprise][7]][7]

How can you update the selection on tabout, but not other close events?

### Here's an MCVE in [jsFiddle][8] and StackSnippets:





    $('.select2').select2({});



    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

    <div class="form-control">
      <label for="foods2">Select2</label>
      <select id="foods2" class="select2" >
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Carrot</option>
        <option value="4">Donut</option>
      </select>
    </div>



  [1]: https://stackoverflow.com/questions/13820718/jquery-select2-tag-on-blur
  [2]: https://github.com/select2/select2/issues/4578
  [3]: https://github.com/select2/select2/issues/4820
  [4]: https://github.com/select2/select2/issues/3472
  [5]: https://select2.org/dropdown#automatic-selection
  [6]: https://select2.org/configuration/options-api
  [7]: https://i.stack.imgur.com/e5LlU.gif
  [8]: https://jsfiddle.net/KyleMit/zo751wv3/