diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index 19568d16..5fcf54ef 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -20,6 +20,148 @@
 <link href="vendor/css/anchor.css" type="text/css" rel="stylesheet" />
 
 <style type="text/css">
+  /*
+   * Side navigation
+   *
+   * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+   * sections of docs content.
+   */
+
+  /* By default it's not affixed in mobile views, so undo that */
+  .s2-docs-sidebar.affix {
+    position: static;
+  }
+  @media (min-width: 768px) {
+    .s2-docs-sidebar {
+      padding-left: 20px;
+    }
+  }
+
+  /* First level of nav */
+  .s2-docs-sidenav {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  /* All levels of nav */
+  .s2-docs-sidebar .nav > li > a {
+    margin-left: -1px;
+    display: block;
+    padding: 4px 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #767676;
+  }
+  .s2-docs-sidebar .nav > li > a code {
+    background-color: inherit;
+    color: #666;
+  }
+  .s2-docs-sidebar .nav > li > a:hover,
+  .s2-docs-sidebar .nav > li > a:focus {
+    padding-left: 19px;
+    color: #428BCA;
+    text-decoration: none;
+    background-color: transparent;
+    border-left: 1px solid #428BCA;
+  }
+  .s2-docs-sidebar .nav > .active > a,
+  .s2-docs-sidebar .nav > .active:hover > a,
+  .s2-docs-sidebar .nav > .active:focus > a {
+    padding-left: 18px;
+    font-weight: bold;
+    color: #428BCA;
+    background-color: transparent;
+    border-left: 2px solid #428BCA;
+  }
+
+  /* Nav: second level (shown on .active) */
+  .s2-docs-sidebar .nav .nav {
+    display: none; /* Hide by default, but at >768px, show it */
+    padding-bottom: 10px;
+  }
+  .s2-docs-sidebar .nav .nav > li > a {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 30px;
+    font-size: 12px;
+    font-weight: normal;
+  }
+  .s2-docs-sidebar .nav .nav > li > a:hover,
+  .s2-docs-sidebar .nav .nav > li > a:focus {
+    padding-left: 29px;
+  }
+  .s2-docs-sidebar .nav .nav > .active > a,
+  .s2-docs-sidebar .nav .nav > .active:hover > a,
+  .s2-docs-sidebar .nav .nav > .active:focus > a {
+    padding-left: 28px;
+    font-weight: 500;
+  }
+
+  /* Back to top (hidden on mobile) */
+  .back-to-top,
+  .s2-docs-theme-toggle {
+    display: none;
+    padding: 4px 10px;
+    margin-top: 10px;
+    margin-left: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #999;
+  }
+  .back-to-top:hover,
+  .s2-docs-theme-toggle:hover {
+    color: #428BCA;
+    text-decoration: none;
+  }
+  .s2-docs-theme-toggle {
+    margin-top: 0;
+  }
+
+  @media (min-width: 768px) {
+    .back-to-top,
+    .s2-docs-theme-toggle {
+      display: block;
+    }
+  }
+
+  /* Show and affix the side nav when space allows it */
+  @media (min-width: 992px) {
+    .s2-docs-sidebar .s2-docs-sidenav {
+      border-left: 1px solid #eee;
+      padding-top: 40px;
+    }
+
+    .s2-docs-sidebar .nav > .active > ul {
+      display: block;
+    }
+    /* Widen the fixed sidebar */
+    .s2-docs-sidebar.affix,
+    .s2-docs-sidebar.affix-bottom {
+      width: 213px;
+    }
+    .s2-docs-sidebar.affix {
+      position: fixed; /* Undo the static from mobile first approach */
+      top: 0px;
+    }
+    .s2-docs-sidebar.affix-bottom {
+      position: absolute; /* Undo the static from mobile first approach */
+    }
+    .s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
+    .s2-docs-sidebar.affix .s2-docs-sidenav {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  @media (min-width: 1200px) {
+    /* Widen the fixed sidebar again */
+    .s2-docs-sidebar.affix-bottom,
+    .s2-docs-sidebar.affix {
+      width: 263px;
+    }
+  }
+
+
+
   /* Footer */
   .s2-docs-footer {
     border-top: 1px solid #E5E5E5;
@@ -63,14 +205,18 @@
   }
 
   .jumbotron {
-    background-color: #428BCA;
-    color: #fff;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+  }
+
+  .jumbotron h1 {
+    font-size: 48px;
   }
 
   .btn-outline-inverse {
-    color: #FFF;
+    color: #333;
     background-color: transparent;
-    border-color: #fff;
+    border-color: #333;
   }
 
   .btn-outline-inverse:hover {
@@ -101,4 +247,56 @@
     font-size: 60%;
     vertical-align: .2em;
   }
+
+  /* Inline code within headings retain the heading's background-color */
+  h2 code,
+  h3 code,
+  h4 code {
+    background-color: inherit;
+  }
+
+  /* Back to top (hidden on mobile) */
+  .back-to-top {
+    display: none;
+    padding: 4px 10px;
+    margin-top: 10px;
+    margin-left: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #999;
+  }
+  .back-to-top:hover {
+    color: #428BCA;
+    text-decoration: none;
+  }
+
+  @media (min-width: 768px) {
+    .back-to-top {
+      display: block;
+    }
+  }
+
+  .s2-docs-nav {
+      margin-bottom: 0;
+  }
+
+  .s2-docs-nav .navbar-brand {
+    font-weight: 500;
+  }
+
+  h1[id] {
+    padding-top: 20px;
+    margin-top: 0;
+  }
+
+  .alert {
+    background-color: transparent;
+    border-width: 2px;
+  }
+
+  @media (min-width: 768px) {
+    .alert {
+      padding: 30px;
+    }
+  }
 </style>
diff --git a/docs/_includes/nav/options.html b/docs/_includes/nav/options.html
new file mode 100644
index 00000000..27a12117
--- /dev/null
+++ b/docs/_includes/nav/options.html
@@ -0,0 +1,54 @@
+<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
+  <ul class="nav s2-docs-sidenav">
+    <li>
+      <a href="#core-options">Core Options</a>
+      <ul class="nav">
+        <li><a href="#data-attributes">Declaring configuration in the data-* attributes</a></li>
+        <li><a href="#amd">AMD compatibility</a></li>
+        <li><a href="#core-options-display">Display</a></li>
+        <li><a href="#core-options-results">Results</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#dropdown">Dropdown</a>
+      <ul class="nav">
+        <li><a href="#dropdownParent">Attached to body</a></li>
+        <li><a href="#dropdown-attachContainer">Attached below the container</a></li>
+        <li><a href="#dropdown-search">Search</a></li>
+        <li><a href="#dropdown-select-on-close">Select the highlighted option on close</a></li>
+        <li><a href="#closeOnSelect">Close the dropdown when a result is selected</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#events">Events</a>
+      <ul class="nav">
+        <li><a href="#events-public">Public events</a></li>
+        <li><a href="#events-internal">Internal events</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#adapters">Adapters</a>
+      <ul class="nav">
+        <li><a href="#adapters-all">All adapters</a></li>
+        <li><a href="#selectionAdapter">Container (selection)</a></li>
+        <li><a href="#dataAdapter">Data set</a></li>
+        <li><a href="#dropdownAdapter">Dropdown</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#setting-default-options">Setting default options</a>
+    </li>
+    <li>
+      <a href="#backwards-compatibility">Backwards compatibility</a>
+      <ul class="nav">
+        <li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
+        <li><a href="#initSelection">Old initial selections with initSelection</a></li>
+        <li><a href="#query">Querying old data with <code>query</code></a></li>
+        <li><a href="#input-fallback">Compatibility with <code>&lt;input type="text" /&gt;</code></a></li>
+      </ul>
+    </li>
+  </ul>
+  <a class="back-to-top" href="#top">
+    Back to top
+  </a>
+</nav>
diff --git a/docs/_includes/navigation.html b/docs/_includes/navigation.html
index f89d53f3..0df3d504 100644
--- a/docs/_includes/navigation.html
+++ b/docs/_includes/navigation.html
@@ -1,4 +1,4 @@
-<header class="navbar navbar-static-top" id="top" role="banner">
+<header class="s2-docs-nav navbar navbar-static-top" id="top" role="banner">
   <div class="container">
     <div class="navbar-header">
       <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index aac314c5..235a815c 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -10,20 +10,52 @@
 
         {% include footer.html %}
         <script>
-          (function () {
-            'use strict';
-            addAnchors('.container h1, .container h2, .container h3, .container h4, .container h5');
-          })();
+            (function ($) {
+                'use strict';
+                $(function () {
+                    var $window = $(window);
+                    var $body = $(document.body);
+                    var $sidebar = $('.s2-docs-sidebar');
+
+                    $body.scrollspy({
+                        target: '.s2-docs-sidebar',
+                        offset: 40
+                    });
+
+                    $window.on('load', function () {
+                        $body.scrollspy('refresh');
+                    });
+
+                    $sidebar.affix({
+                        offset: {
+                            top: function () {
+                                var offsetTop = $sidebar.offset().top;
+                                var navOuterHeight = $('.s2-docs-nav').height();
+
+                                return (this.top = offsetTop - navOuterHeight);
+                            },
+                            bottom: function () {
+                                return (this.bottom = $('.s2-docs-footer').outerHeight(true));
+                            }
+                        }
+                    });
+                });
+            })(jQuery);
+
+            (function () {
+                'use strict';
+                addAnchors('.s2-docs-container h1, .s2-docs-container h2, .s2-docs-container h3, .s2-docs-container h4, .s2-docs-container h5');
+            })();
         </script>
 
         <script type="text/javascript">
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-        ga('create', 'UA-57144786-2', 'auto');
-        ga('send', 'pageview');
+            ga('create', 'UA-57144786-2', 'auto');
+            ga('send', 'pageview');
         </script>
     </body>
 </html>
diff --git a/docs/options.html b/docs/options.html
index 6263edb1..0ca4d9d5 100644
--- a/docs/options.html
+++ b/docs/options.html
@@ -4,29 +4,40 @@ title: Options - Select2
 slug: options
 ---
 
-<div class="container">
-  <section id="core">
-    <div class="page-header">
-      <h1>Core options</h1>
-    </div>
-
-    <p>
-      Select2 supports a small subset of options in every build that is
-      generated. Each option typically has a decorator that is required that
-      wraps an adapter, adding support for the option. This is only required
-      when a custom adapter is being used, as Select2 will build the required
-      adapters by default.
+<section class="jumbotron">
+  <div class="container">
+    <h1>
+      Options
+    </h1>
+    <p class="lead">
+      Lorem ipsum.
     </p>
+  </div>
+</section>
 
-    <p>
-      Select2 will automatically apply decorators to any adapters which have not
-      been manually overridden. The only time you need to decorate adapters is
-      when you are using third-party adapters not provided by Select2, or you
-      are using features not provided in the Select2 core. You can apply a
-      decorator to an adapter using the
-      <code title="select2/utils">Utils.Decorate</code> method provided with
-      Select2.
-    </p>
+<div class="container s2-docs-container">
+<div class="row">
+  <div class="col-md-9" role="main">
+    <section id="core">
+      <h1 class="page-header">Core options</h1>
+
+      <p>
+        Select2 supports a small subset of options in every build that is
+        generated. Each option typically has a decorator that is required that
+        wraps an adapter, adding support for the option. This is only required
+        when a custom adapter is being used, as Select2 will build the required
+        adapters by default.
+      </p>
+
+      <p>
+        Select2 will automatically apply decorators to any adapters which have not
+        been manually overridden. The only time you need to decorate adapters is
+        when you are using third-party adapters not provided by Select2, or you
+        are using features not provided in the Select2 core. You can apply a
+        decorator to an adapter using the
+        <code title="select2/utils">Utils.Decorate</code> method provided with
+        Select2.
+      </p>
 
 <pre class="prettyprint linenums">
 $.fn.select2.amd.require(
@@ -36,35 +47,35 @@ $.fn.select2.amd.require(
 });
 </pre>
 
-    <p>
-      All core options that use decorators or adapters will clearly state it
-      in the "Decorator" or "Adapter" part of the documentation. Decorators are
-      typically only compatible with a specific type of adapter, so make sure to
-      note what adapter is given.
-    </p>
+      <p>
+        All core options that use decorators or adapters will clearly state it
+        in the "Decorator" or "Adapter" part of the documentation. Decorators are
+        typically only compatible with a specific type of adapter, so make sure to
+        note what adapter is given.
+      </p>
 
-    <h2 id="data-attributes">
-      Declaring configuration in the <code>data-*</code> attributes
-    </h2>
+      <h2 id="data-attributes">
+        Declaring configuration in the <code>data-*</code> attributes
+      </h2>
 
-    <p>
-      It is recommended that you declare your configuration options for Select2
-      when initializing Select2. You can also define your configuration options
-      by using the HTML5 <code>data-*</code> attributes, which will override
-      any options set when initializing Select2 and any defaults.
-    </p>
+      <p>
+        It is recommended that you declare your configuration options for Select2
+        when initializing Select2. You can also define your configuration options
+        by using the HTML5 <code>data-*</code> attributes, which will override
+        any options set when initializing Select2 and any defaults.
+      </p>
 
-    <p>
-      This means that if you declare your <code>&lt;select&gt;</code> tag as...
-    </p>
+      <p>
+        This means that if you declare your <code>&lt;select&gt;</code> tag as...
+      </p>
 
 <pre class="prettyprint linenums">
 &lt;select data-tags="true" data-placeholder="Select an option"&gt;&lt;/select&gt;
 </pre>
 
-    <p>
-      Will be interpreted the same as initializing Select2 as...
-    </p>
+      <p>
+        Will be interpreted the same as initializing Select2 as...
+      </p>
 
 <pre class="prettyprint linenums">
 $("select").select2({
@@ -73,22 +84,22 @@ $("select").select2({
 });
 </pre>
 
-    <p>
-      You can also define nested configurations, which are typically needed for
-      options such as AJAX. Each level of nesting should be separated by two
-      dashes (<code>--</code>) instead of one. Due to
-      <a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
-      nested options using <code>data-*</code> attributes
-      <a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
-    </p>
+      <p>
+        You can also define nested configurations, which are typically needed for
+        options such as AJAX. Each level of nesting should be separated by two
+        dashes (<code>--</code>) instead of one. Due to
+        <a href="https://github.com/jquery/jquery/issues/2070">a jQuery bug</a>,
+        nested options using <code>data-*</code> attributes
+        <a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
+      </p>
 
 <pre class="prettyprint linenums">
 &lt;select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"&gt;&lt;/select&gt;
 </pre>
 
-    <p>
-      Which will be interpreted the same as initializing Select2 with...
-    </p>
+      <p>
+        Which will be interpreted the same as initializing Select2 with...
+      </p>
 
 <pre class="prettyprint linenums">
 $("select").select2({
@@ -99,133 +110,133 @@ $("select").select2({
 });
 </pre>
 
-    <p>
-      The value of the option is subject to jQuery's
-      <a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
-      HTML5 data attributes.
-    </p>
+      <p>
+        The value of the option is subject to jQuery's
+        <a href="https://api.jquery.com/data/#data-html5">parsing rules</a> for
+        HTML5 data attributes.
+      </p>
 
-    <h2 id="amd">
-      AMD compatibility
-    </h2>
+      <h2 id="amd">
+        AMD compatibility
+      </h2>
 
-    <p>
-      You can find more information on how to integrate Select2 with your
-      existing AMD-based project by
-      <a href="announcements-4.0.html#builds">viewing the 4.0 release notes</a>.
-      Select2 automatically loads some modules when the adapters are being
-      automatically constructed, so those who are using Select2 with a custom
-      AMD build using their own system may need to specify the paths that are
-      generated to the Select2 modules.
-    </p>
+      <p>
+        You can find more information on how to integrate Select2 with your
+        existing AMD-based project by
+        <a href="announcements-4.0.html#builds">viewing the 4.0 release notes</a>.
+        Select2 automatically loads some modules when the adapters are being
+        automatically constructed, so those who are using Select2 with a custom
+        AMD build using their own system may need to specify the paths that are
+        generated to the Select2 modules.
+      </p>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>amdBase</code>
-          </dd>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>amdBase</code>
+            </dd>
 
-          <dt>Default</dt>
-          <dd>
-            <code>select2/</code>
-          </dd>
-        </dl>
-      </div>
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>amdLanguageBase</code>
-          </dd>
+            <dt>Default</dt>
+            <dd>
+              <code>select2/</code>
+            </dd>
+          </dl>
+        </div>
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>amdLanguageBase</code>
+            </dd>
 
-          <dt>Default</dt>
-          <dd>
-            <code>select2/i18n/</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
-
-    <h2>
-      Display
-    </h2>
-
-    <p>
-      Select2 provides options that allow you to directly affect how the
-      container that holds the current selection is displayed.
-    </p>
-
-    <h3 id="placeholder">
-      Placeholders
-    </h3>
-
-    <p>
-      Select2 can display a placeholder for a single-value select that will
-      replace an option, or be shown when no options are selected for
-      multiple-value selects. You can find an example on the
-      <a href="examples.html#placeholders">example page</a>.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-4">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>placeholder</code>
-          </dd>
-
-          <dt>Value</dt>
-          <dd>string or object</dd>
-        </dl>
-
-        <hr />
-
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/selection/base">SelectionAdapter</code>
-          </dd>
-
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/selection/placeholder">Placeholder</code>
-            and
-            <code title="select2/dropdown/hidePlaceholder">HidePlaceholder</code>
-          </dd>
-        </dl>
-      </div>
-
-      <div class="col-sm-8">
-        <div class="alert alert-warning">
-          <strong>Heads up!</strong>
-          Because browsers assume that the first <code>option</code> in
-          single-value select boxes is selected, you should add an empty
-          <code>&lt;option&gt;&lt;/option&gt;</code> tag that the placeholder
-          should use or it may not work.
+            <dt>Default</dt>
+            <dd>
+              <code>select2/i18n/</code>
+            </dd>
+          </dl>
         </div>
       </div>
-    </div>
 
-    <p>
-      If the <strong>value is a string</strong>, the placeholder will be
-      displayed when a <strong>blank option</strong> is used as the placeholder.
-      The <strong>value</strong> will be the message to show to users as the
-      placeholders.
-    </p>
+      <h2 id="core-options-display">
+        Display
+      </h2>
+
+      <p>
+        Select2 provides options that allow you to directly affect how the
+        container that holds the current selection is displayed.
+      </p>
+
+      <h3 id="placeholder">
+        Placeholders
+      </h3>
+
+      <p>
+        Select2 can display a placeholder for a single-value select that will
+        replace an option, or be shown when no options are selected for
+        multiple-value selects. You can find an example on the
+        <a href="examples.html#placeholders">example page</a>.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>placeholder</code>
+            </dd>
+
+            <dt>Value</dt>
+            <dd>string or object</dd>
+          </dl>
+
+          <hr />
+
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/selection/base">SelectionAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/selection/placeholder">Placeholder</code>
+              and
+              <code title="select2/dropdown/hidePlaceholder">HidePlaceholder</code>
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <div class="alert alert-warning">
+            <strong>Heads up!</strong>
+            Because browsers assume that the first <code>option</code> in
+            single-value select boxes is selected, you should add an empty
+            <code>&lt;option&gt;&lt;/option&gt;</code> tag that the placeholder
+            should use or it may not work.
+          </div>
+        </div>
+      </div>
+
+      <p>
+        If the <strong>value is a string</strong>, the placeholder will be
+        displayed when a <strong>blank option</strong> is used as the placeholder.
+        The <strong>value</strong> will be the message to show to users as the
+        placeholders.
+      </p>
 
 <pre class="prettyprint linenums">
 placeholder: "Select a repository",
 </pre>
 
-    <p>
-      If the <strong>value is an object</strong>, the object should be
-      compatible with Select2's internal objects. The <code>id</code> should
-      be the id to look for when determining if the placeholder should be
-      displayed. The <code>text</code> should be the placeholder to display
-      when that option is selected.
-    </p>
+      <p>
+        If the <strong>value is an object</strong>, the object should be
+        compatible with Select2's internal objects. The <code>id</code> should
+        be the id to look for when determining if the placeholder should be
+        displayed. The <code>text</code> should be the placeholder to display
+        when that option is selected.
+      </p>
 
 <pre class="prettyprint linenums">
 placeholder: {
@@ -234,186 +245,186 @@ placeholder: {
 }
 </pre>
 
-    <div class="alert alert-info">
-      You should <strong>pass in an object</strong> when you are using a
-      framework that <strong>creates its own placeholder option</strong>. The
-      <strong>id</strong> should be the same as the <code>value</code>
-      attribute on the <code>option</code>.
-    </div>
-
-    <p id="allowClear">
-      You can allow a selected option to be cleared back to the placeholder by
-      enabling the <code>allowClear</code> option.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>allowClear</code></dd>
-
-          <dt>Value</dt>
-          <dd>boolean</dd>
-        </dl>
+      <div class="alert alert-info">
+        You should <strong>pass in an object</strong> when you are using a
+        framework that <strong>creates its own placeholder option</strong>. The
+        <strong>id</strong> should be the same as the <code>value</code>
+        attribute on the <code>option</code>.
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/selection/base">SelectionAdapter</code>
-          </dd>
+      <p id="allowClear">
+        You can allow a selected option to be cleared back to the placeholder by
+        enabling the <code>allowClear</code> option.
+      </p>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/selection/allowClear">AllowClear</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>allowClear</code></dd>
 
-    <p>
-      This will display an "x" that the user can click to clear the current
-      selection. It is designed to be used for cases where a single selection
-      can be made.
-    </p>
+            <dt>Value</dt>
+            <dd>boolean</dd>
+          </dl>
+        </div>
 
-    <h3 id="multiple">
-      Multiple selections
-    </h3>
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/selection/base">SelectionAdapter</code>
+            </dd>
 
-    <p>
-      Select2 can display either a single selection or multiple selections.
-    </p>
-
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd><code>multiple</code></dd>
-
-      <dt>Value</dt>
-      <dd>boolean (<code>true</code> or <code>false</code>)</dd>
-    </dl>
-
-    <p>
-      This option will determine what the <code>SelectAdapter</code> (used by
-      default) should use to set the value of the underlying <code>select</code>
-      element. It will also determine if the <code>MultipleSelection</code>
-      adapter should be used.
-    </p>
-
-    <h3 id="width">
-      Container width
-    </h3>
-
-    <p>
-      Select2 will try to match the width of the original element as closely as
-      possible. Sometimes this isn't perfect, which is what you can tell Select2
-      how to determine the width.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-8">
-        <table class="table table-striped table-bordered">
-          <thead>
-            <tr>
-              <th>Value</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>"element"</code></td>
-              <td>
-                Uses javascript to calculate the width of the source element.
-              </td>
-            </tr>
-            <tr>
-              <td><code>"style"</code></td>
-              <td>
-                Copies the value of the width <code>style</code> attribute set on the source element.
-              </td>
-            </tr>
-            <tr>
-              <td><code>"resolve"</code></td>
-              <td>
-                Tries to use <code>style</code> to determine the width, falling back to <code>element</code>.
-              </td>
-            </tr>
-            <tr>
-              <td>Anything else</td>
-              <td>
-                The value of the <code>width</code> option is directly set as the width of the container.
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="col-sm-4">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>width</code></dd>
-
-          <dt>Value</dt>
-          <dd>string</dd>
-        </dl>
-      </div>
-    </div>
-
-    <h3 id="language">
-      Internationalization (Language support)
-    </h3>
-
-    <p>
-      Messages will be displayed to users when necessary, such as when no
-      search results were found or more characters need to be entered in order
-      for a search to be made. These messages have been
-      <a href="community.html#translations">translated into many languages</a>
-      by contributors to Select2, but you can also provide your own
-      translations.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-4">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>language</code></dd>
-
-          <dt>Value</dt>
-          <dd>object or string</dd>
-        </dl>
-
-        <hr />
-
-        <dl class="dl-horizontal">
-          <dt>Module</dt>
-          <dd>
-            <code title="select2/translation">Translation</code>
-          </dd>
-        </dl>
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/selection/allowClear">AllowClear</code>
+            </dd>
+          </dl>
+        </div>
       </div>
 
-      <div class="col-sm-8">
-        <p class="alert alert-warning">
-          <strong>Heads up!</strong> When using translations provided by Select2,
-          you must make sure to include the translation file in your page after
-          Select2.
-        </p>
+      <p>
+        This will display an "x" that the user can click to clear the current
+        selection. It is designed to be used for cases where a single selection
+        can be made.
+      </p>
+
+      <h3 id="multiple">
+        Multiple selections
+      </h3>
+
+      <p>
+        Select2 can display either a single selection or multiple selections.
+      </p>
+
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd><code>multiple</code></dd>
+
+        <dt>Value</dt>
+        <dd>boolean (<code>true</code> or <code>false</code>)</dd>
+      </dl>
+
+      <p>
+        This option will determine what the <code>SelectAdapter</code> (used by
+        default) should use to set the value of the underlying <code>select</code>
+        element. It will also determine if the <code>MultipleSelection</code>
+        adapter should be used.
+      </p>
+
+      <h3 id="width">
+        Container width
+      </h3>
+
+      <p>
+        Select2 will try to match the width of the original element as closely as
+        possible. Sometimes this isn't perfect, which is what you can tell Select2
+        how to determine the width.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <table class="table table-striped table-bordered">
+            <thead>
+              <tr>
+                <th>Value</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>"element"</code></td>
+                <td>
+                  Uses javascript to calculate the width of the source element.
+                </td>
+              </tr>
+              <tr>
+                <td><code>"style"</code></td>
+                <td>
+                  Copies the value of the width <code>style</code> attribute set on the source element.
+                </td>
+              </tr>
+              <tr>
+                <td><code>"resolve"</code></td>
+                <td>
+                  Tries to use <code>style</code> to determine the width, falling back to <code>element</code>.
+                </td>
+              </tr>
+              <tr>
+                <td>Anything else</td>
+                <td>
+                  The value of the <code>width</code> option is directly set as the width of the container.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>width</code></dd>
+
+            <dt>Value</dt>
+            <dd>string</dd>
+          </dl>
+        </div>
       </div>
-    </div>
 
-    <p>
-      When a string is passed in as the language, Select2 will try to resolve
-      it into a language file. This allows you to specify your own language
-      files, which must be defined as an AMD module. If the language file
-      cannot be found, Select2 will assume it is a language code controlled by
-      Select2, and it will try to load the translations for that language
-      instead.
-    </p>
+      <h3 id="language">
+        Internationalization (Language support)
+      </h3>
 
-    <p>
-      You can include your own translations by providing an object similar to
-      the one below.
-    </p>
+      <p>
+        Messages will be displayed to users when necessary, such as when no
+        search results were found or more characters need to be entered in order
+        for a search to be made. These messages have been
+        <a href="community.html#translations">translated into many languages</a>
+        by contributors to Select2, but you can also provide your own
+        translations.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>language</code></dd>
+
+            <dt>Value</dt>
+            <dd>object or string</dd>
+          </dl>
+
+          <hr />
+
+          <dl class="dl-horizontal">
+            <dt>Module</dt>
+            <dd>
+              <code title="select2/translation">Translation</code>
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <p class="alert alert-warning">
+            <strong>Heads up!</strong> When using translations provided by Select2,
+            you must make sure to include the translation file in your page after
+            Select2.
+          </p>
+        </div>
+      </div>
+
+      <p>
+        When a string is passed in as the language, Select2 will try to resolve
+        it into a language file. This allows you to specify your own language
+        files, which must be defined as an AMD module. If the language file
+        cannot be found, Select2 will assume it is a language code controlled by
+        Select2, and it will try to load the translations for that language
+        instead.
+      </p>
+
+      <p>
+        You can include your own translations by providing an object similar to
+        the one below.
+      </p>
 
 <pre class="prettyprint linenums">
 language: {
@@ -426,194 +437,194 @@ language: {
 }
 </pre>
 
-    <h3 id="templating">
-      Templating results and selections
-    </h3>
+      <h3 id="templating">
+        Templating results and selections
+      </h3>
 
-    <p>
-      By default, Select2 will display the option text within the list of
-      results and when the option has been selected.  Select2 comes with options
-      that allow you to further customize the display of results and selections,
-      allowing you to display them however you want.
-    </p>
+      <p>
+        By default, Select2 will display the option text within the list of
+        results and when the option has been selected.  Select2 comes with options
+        that allow you to further customize the display of results and selections,
+        allowing you to display them however you want.
+      </p>
 
-    <h4 id="templateSelection">
-      Customizing the display of selections
-    </h4>
+      <h4 id="templateSelection">
+        Customizing the display of selections
+      </h4>
 
-    <p>
-      When an option is displayed after it has been selected, it is passed
-      through a formatting function that determines what is displayed. By
-      default, the function only returns the <code>text</code> key of the data
-      object.
-    </p>
+      <p>
+        When an option is displayed after it has been selected, it is passed
+        through a formatting function that determines what is displayed. By
+        default, the function only returns the <code>text</code> key of the data
+        object.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd><code>templateSelection</code></dd>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd><code>templateSelection</code></dd>
 
-      <dt>Value</dt>
-      <dd>A function taking a <code>selection</code> object</dd>
-    </dl>
+        <dt>Value</dt>
+        <dd>A function taking a <code>selection</code> object</dd>
+      </dl>
 
-    <div class="alert alert-info">
-      <strong>Anything rendered as a selection is templated.</strong>
-      This includes placeholders and pre-existing selections that are displayed,
-      so you must ensure that your templating functions can support them.
-    </div>
-
-    <p>
-      The <code>templateSelection</code> function should return a string
-      containing the text to be displayed, or an object (such as a jQuery
-      object) that contains the data that should be displayed.
-    </p>
-
-    <p>
-      <strong>Strings are assumed to contain only text</strong> and will be
-      passed through the <code>escapeMarkup</code> function, which strips any
-      HTML markup.
-    </p>
-
-    <p>
-      <strong>
-        Anything else will be passed
-        <a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
-      </strong> and will be handled directly by jQuery.  Any markup, such as
-      HTML, returned will not be escaped and it is up to you to escape any
-      malicious input provided by users.
-    </p>
-
-    <h4 id="templateResult">
-      Customizing the display of results
-    </h4>
-
-    <p>
-      When an option is displayed after it has been selected, it is passed
-      through a formatting function that determines what is displayed. By
-      default, the function only returns the <code>text</code> key of the data
-      object.
-    </p>
-
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd><code>templateSelection</code></dd>
-
-      <dt>Value</dt>
-      <dd>A function taking a <code>selection</code> object</dd>
-    </dl>
-
-    <div class="alert alert-info">
-      <strong>Anything rendered in the results is templated.</strong>
-      This includes results such as the "Searching..." and "Loading more..."
-      text which will periodically be displayed, which allows you to add more
-      advanced formatting to these automatically generated options.
-    </div>
-
-    <p>
-      The <code>templateResult</code> function should return a string
-      containing the text to be displayed, or an object (such as a jQuery
-      object) that contains the data that should be displayed.  It can also
-      return <code>null</code>, which will prevent the option from being
-      displayed in the results list.
-    </p>
-
-    <p>
-      <strong>Strings are assumed to contain only text</strong> and will be
-      passed through the <code>escapeMarkup</code> function, which strips any
-      HTML markup.
-    </p>
-
-    <p>
-      <strong>
-        Anything else will be passed
-        <a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
-      </strong> and will be handled directly by jQuery.  Any markup, such as
-      HTML, returned will not be escaped and it is up to you to escape any
-      malicious input provided by users.
-    </p>
-
-    <h2>
-      Results
-    </h2>
-
-    <p>
-      Select2 can work on many different data sets ranging from local options,
-      the same way that a <code>&lt;select&gt;</code> typically works, from
-      remote options where a server generates the results that users can select
-      from.
-    </p>
-
-    <h3 id="data">
-      Array
-    </h3>
-
-    <p>
-      Select2 allows creating the results based on an array of data objects that
-      is included when initializing Select2.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>data</code></dd>
-
-          <dt>Value</dt>
-          <dd>array of objects</dd>
-        </dl>
+      <div class="alert alert-info">
+        <strong>Anything rendered as a selection is templated.</strong>
+        This includes placeholders and pre-existing selections that are displayed,
+        so you must ensure that your templating functions can support them.
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/array">ArrayAdapter</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        The <code>templateSelection</code> function should return a string
+        containing the text to be displayed, or an object (such as a jQuery
+        object) that contains the data that should be displayed.
+      </p>
 
-    <p>
-      The objects that the users can select from should be passed as an array
-      with each object containing <code>id</code> and <code>text</code>
-      properties.
-    </p>
+      <p>
+        <strong>Strings are assumed to contain only text</strong> and will be
+        passed through the <code>escapeMarkup</code> function, which strips any
+        HTML markup.
+      </p>
 
-    <h3 id="ajax">
-      AJAX
-    </h3>
+      <p>
+        <strong>
+          Anything else will be passed
+          <a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
+        </strong> and will be handled directly by jQuery.  Any markup, such as
+        HTML, returned will not be escaped and it is up to you to escape any
+        malicious input provided by users.
+      </p>
 
-    <p>
-      Select2 allows searching for results from remote data sources using AJAX
-      requests.
-    </p>
+      <h4 id="templateResult">
+        Customizing the display of results
+      </h4>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>ajax</code></dd>
+      <p>
+        When an option is displayed after it has been selected, it is passed
+        through a formatting function that determines what is displayed. By
+        default, the function only returns the <code>text</code> key of the data
+        object.
+      </p>
 
-          <dt>Value</dt>
-          <dd>object</dd>
-        </dl>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd><code>templateSelection</code></dd>
+
+        <dt>Value</dt>
+        <dd>A function taking a <code>selection</code> object</dd>
+      </dl>
+
+      <div class="alert alert-info">
+        <strong>Anything rendered in the results is templated.</strong>
+        This includes results such as the "Searching..." and "Loading more..."
+        text which will periodically be displayed, which allows you to add more
+        advanced formatting to these automatically generated options.
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/ajax">AjaxAdapter</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        The <code>templateResult</code> function should return a string
+        containing the text to be displayed, or an object (such as a jQuery
+        object) that contains the data that should be displayed.  It can also
+        return <code>null</code>, which will prevent the option from being
+        displayed in the results list.
+      </p>
 
-    <p>
-      All options passed to this option will be directly passed to the
-      <code>$.ajax</code> function that executes AJAX requests. There are a few
-      custom options that Select2 will intercept, allowing you to customize the
-      request as it is being made.
+      <p>
+        <strong>Strings are assumed to contain only text</strong> and will be
+        passed through the <code>escapeMarkup</code> function, which strips any
+        HTML markup.
+      </p>
+
+      <p>
+        <strong>
+          Anything else will be passed
+          <a href="https://api.jquery.com/append/">directly to <code>jQuery.fn.append</code></a>
+        </strong> and will be handled directly by jQuery.  Any markup, such as
+        HTML, returned will not be escaped and it is up to you to escape any
+        malicious input provided by users.
+      </p>
+
+      <h2 id="core-options-results">
+        Results
+      </h2>
+
+      <p>
+        Select2 can work on many different data sets ranging from local options,
+        the same way that a <code>&lt;select&gt;</code> typically works, from
+        remote options where a server generates the results that users can select
+        from.
+      </p>
+
+      <h3 id="data">
+        Array
+      </h3>
+
+      <p>
+        Select2 allows creating the results based on an array of data objects that
+        is included when initializing Select2.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>data</code></dd>
+
+            <dt>Value</dt>
+            <dd>array of objects</dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/array">ArrayAdapter</code>
+            </dd>
+          </dl>
+        </div>
+      </div>
+
+      <p>
+        The objects that the users can select from should be passed as an array
+        with each object containing <code>id</code> and <code>text</code>
+        properties.
+      </p>
+
+      <h3 id="ajax">
+        AJAX
+      </h3>
+
+      <p>
+        Select2 allows searching for results from remote data sources using AJAX
+        requests.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>ajax</code></dd>
+
+            <dt>Value</dt>
+            <dd>object</dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/ajax">AjaxAdapter</code>
+            </dd>
+          </dl>
+        </div>
+      </div>
+
+      <p>
+        All options passed to this option will be directly passed to the
+        <code>$.ajax</code> function that executes AJAX requests. There are a few
+        custom options that Select2 will intercept, allowing you to customize the
+        request as it is being made.
 
 <pre class="prettyprint linenums">
 ajax: {
@@ -682,88 +693,88 @@ ajax: {
   }
 }
 </pre>
-    </p>
+      </p>
 
-    <h3 id="tags">
-      Tags
-    </h3>
+      <h3 id="tags">
+        Tags
+      </h3>
 
-    <p>
-      Users can create their own options based on the text that they have
-      entered.
-    </p>
+      <p>
+        Users can create their own options based on the text that they have
+        entered.
+      </p>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>tags</code></dd>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>tags</code></dd>
 
-          <dt>Value</dt>
-          <dd>boolean / array of objects</dd>
-        </dl>
+            <dt>Value</dt>
+            <dd>boolean / array of objects</dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/base">DataAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/data/tags">Tags</code>
+            </dd>
+          </dl>
+        </div>
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/base">DataAdapter</code>
-          </dd>
+      <p>
+        If the <code>tags</code> option is passed into Select2, if a user types
+        anything into the search box which doesn't already exist, it will be
+        displayed at the top and the user will be able to select it.
+      </p>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/data/tags">Tags</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        <strong>For backwards compatibility</strong>, if an array of objects is
+        passed in with the <code>tags</code> option, the options will be
+        automatically created and the user will be able to select from them.
+        This is the <strong>same as how <a href="#data">array data</a>
+        works</strong>, and has similar limitations.
+      </p>
 
-    <p>
-      If the <code>tags</code> option is passed into Select2, if a user types
-      anything into the search box which doesn't already exist, it will be
-      displayed at the top and the user will be able to select it.
-    </p>
+      <h3 id="matcher">
+        Change how options are matched when searching
+      </h3>
 
-    <p>
-      <strong>For backwards compatibility</strong>, if an array of objects is
-      passed in with the <code>tags</code> option, the options will be
-      automatically created and the user will be able to select from them.
-      This is the <strong>same as how <a href="#data">array data</a>
-      works</strong>, and has similar limitations.
-    </p>
+      <p>
+        When users filter down the results by entering search terms into the
+        search box, Select2 uses an internal "matcher" to match search terms to
+        results. <strong>When a remote data set is used, Select2 expects that the
+        returned results have already been filtered.</strong>
+      </p>
 
-    <h3 id="matcher">
-      Change how options are matched when searching
-    </h3>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd>
+          <code>matcher</code>
+        </dd>
 
-    <p>
-      When users filter down the results by entering search terms into the
-      search box, Select2 uses an internal "matcher" to match search terms to
-      results. <strong>When a remote data set is used, Select2 expects that the
-      returned results have already been filtered.</strong>
-    </p>
+        <dt>Value</dt>
+        <dd>
+          A function taking search <code>params</code> and the
+          <code>data</code> object.
+        </dd>
+      </dl>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd>
-        <code>matcher</code>
-      </dd>
-
-      <dt>Value</dt>
-      <dd>
-        A function taking search <code>params</code> and the
-        <code>data</code> object.
-      </dd>
-    </dl>
-
-    <p>
-      Select2 will pass the individual data objects that have been passed back
-      from the data adapter into the <code>matcher</code> individually to
-      determine if they should be displayed. Only the first-level objects will
-      be passed in, so <strong>if you are working with nested data, you need to
-      match those individually</strong>.
-    </p>
+      <p>
+        Select2 will pass the individual data objects that have been passed back
+        from the data adapter into the <code>matcher</code> individually to
+        determine if they should be displayed. Only the first-level objects will
+        be passed in, so <strong>if you are working with nested data, you need to
+        match those individually</strong>.
+      </p>
 
 <pre class="prettyprint linenums">
 matcher: function (params, data) {
@@ -788,403 +799,403 @@ matcher: function (params, data) {
 }
 </pre>
 
-    <p>
-      This allows for more advanced matching when working with nested objects,
-      allowing you to handle them however you want. For those who are not
-      looking to implement highly customized matching, but instead are just
-      looking to change the matching algorithm for the text, a
-      <a href="#compat-matcher">compatibility modules</a> has been created to
-      make it easier.
-    </p>
-  </section>
+      <p>
+        This allows for more advanced matching when working with nested objects,
+        allowing you to handle them however you want. For those who are not
+        looking to implement highly customized matching, but instead are just
+        looking to change the matching algorithm for the text, a
+        <a href="#compat-matcher">compatibility modules</a> has been created to
+        make it easier.
+      </p>
+    </section>
 
-  <section id="dropdown">
-    <div class="page-header">
-      <h1>Dropdown</h1>
-    </div>
-
-    <p>
-      Select2 allows you to change the way that the dropdown works, allowing you
-      to do anything from attach it to a different location in the document or
-      add a search box.
-    </p>
-
-    <h2 id="dropdownParent">
-      Attached to body
-    </h2>
-
-    <p>
-      By default, Select2 will attach the dropdown to the end of the body and
-      will absolutely position it to appear below the selection container.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-4">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>dropdownParent</code></dd>
-
-          <dt>Value</dt>
-          <dd>jQuery element or DOM node</dd>
-
-          <hr />
-
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/dropdown">DropdownAdapter</code>
-          </dd>
-
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/dropdown/attachBody">AttachBody</code>
-          </dd>
-        </dl>
+    <section id="dropdown">
+      <div class="page-header">
+        <h1>Dropdown</h1>
       </div>
 
-      <div class="col-sm-8">
-        <div class="alert alert-warning">
-          <strong>Heads up!</strong>
-          This will cause DOM events to be raised outside of the standard
-          Select2 DOM container. This can cause issues with
-          third-party components such as modals.
+      <p>
+        Select2 allows you to change the way that the dropdown works, allowing you
+        to do anything from attach it to a different location in the document or
+        add a search box.
+      </p>
+
+      <h2 id="dropdownParent">
+        Attached to body
+      </h2>
+
+      <p>
+        By default, Select2 will attach the dropdown to the end of the body and
+        will absolutely position it to appear below the selection container.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>dropdownParent</code></dd>
+
+            <dt>Value</dt>
+            <dd>jQuery element or DOM node</dd>
+
+            <hr />
+
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/dropdown">DropdownAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/dropdown/attachBody">AttachBody</code>
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <div class="alert alert-warning">
+            <strong>Heads up!</strong>
+            This will cause DOM events to be raised outside of the standard
+            Select2 DOM container. This can cause issues with
+            third-party components such as modals.
+          </div>
         </div>
       </div>
-    </div>
 
-    <p>
-      When the dropdown is attached to the body, you are not limited to just
-      displaying the dropdown below the container. Select2 will display above
-      the container if there is not enough space below the container, but there
-      is enough space above it. You are also not limited to displaying the
-      dropdown within the parent container, which means Select2 will render
-      correctly inside of modals and other small containers.
-    </p>
+      <p>
+        When the dropdown is attached to the body, you are not limited to just
+        displaying the dropdown below the container. Select2 will display above
+        the container if there is not enough space below the container, but there
+        is enough space above it. You are also not limited to displaying the
+        dropdown within the parent container, which means Select2 will render
+        correctly inside of modals and other small containers.
+      </p>
 
-    <h2 id="dropdown-attachContainer">
-      Attached below the container
-    </h2>
+      <h2 id="dropdown-attachContainer">
+        Attached below the container
+      </h2>
 
-    <p>
-      Select2 can place the dropdown directly after the selection container, so
-      it will appear in the same location within the DOM as the rest of Select2.
-    </p>
+      <p>
+        Select2 can place the dropdown directly after the selection container, so
+        it will appear in the same location within the DOM as the rest of Select2.
+      </p>
 
-    <div class="row">
-      <div class="col-sm-4">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/dropdown">DropdownAdapter</code>
-          </dd>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/dropdown">DropdownAdapter</code>
+            </dd>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/dropdown/attachContainer">AttachContainer</code>
-          </dd>
-        </dl>
-      </div>
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/dropdown/attachContainer">AttachContainer</code>
+            </dd>
+          </dl>
+        </div>
 
-      <div class="col-sm-8">
-        <div class="alert alert-warning">
-          <strong>Check your build.</strong> This module is only included in the
-          <a href="index.html#builds-full" class="alert-link">full builds</a> of
-          Select2.
+        <div class="col-sm-6">
+          <div class="alert alert-warning">
+            <strong>Check your build.</strong> This module is only included in the
+            <a href="index.html#builds-full" class="alert-link">full builds</a> of
+            Select2.
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="alert alert-info">
-      <strong>
-        <a href="https://harvesthq.github.io/chosen/">Harvest Chosen</a>
-        migrators!
-      </strong>
-      If you are migrating to Select2 from Chosen, this option will cause
-      Select2 to position the dropdown in a similar way.
-    </div>
-
-    <h2 id="dropdown-search">
-      Search
-    </h2>
-
-    <p>
-      Users can filter down the results by typing a search term into a box that
-      is displayed at the top of the dropdown.
-    </p>
-
-    <dl class="dl-horizontal">
-      <dt>Adapter</dt>
-      <dd>
-        <code title="select2/dropdown">DropdownAdapter</code>
-      </dd>
-
-      <dt>Decorator</dt>
-      <dd>
-        <code title="select2/dropdown/search">DropdownSearch</code>
-      </dd>
-    </dl>
-
-    <p>
-      A search box is added to the top of the dropdown automatically for select
-      boxes where only a single option can be selected.
-    </p>
-
-    <h3 id="dropdown-minimumInputLength">
-      Minimum search term length to filter results
-    </h3>
-
-    <p>
-      Sometimes when working with large data sets, it is more efficient to start
-      filtering the results when the search term is a certain length. This is
-      very common when working with remote data sets, as allows for only
-      significant search terms to be used.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>minimumInputLength</code></dd>
-
-          <dt>Value</dt>
-          <dd>integer</dd>
-        </dl>
+      <div class="alert alert-info">
+        <strong>
+          <a href="https://harvesthq.github.io/chosen/">Harvest Chosen</a>
+          migrators!
+        </strong>
+        If you are migrating to Select2 from Chosen, this option will cause
+        Select2 to position the dropdown in a similar way.
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/base">DataAdapter</code>
-          </dd>
+      <h2 id="dropdown-search">
+        Search
+      </h2>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/data/minimumInputLength">MinimumInputLength</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        Users can filter down the results by typing a search term into a box that
+        is displayed at the top of the dropdown.
+      </p>
 
-    <h3 id="dropdown-maximumInputLength">
-      Maximum search term length to filter results
-    </h3>
+      <dl class="dl-horizontal">
+        <dt>Adapter</dt>
+        <dd>
+          <code title="select2/dropdown">DropdownAdapter</code>
+        </dd>
 
-    <p>
-      In some cases, search terms need to be limited to a certain range. Select2
-      allows you to limit the length of the search term such that it does not
-      exceed a certain length.
-    </p>
+        <dt>Decorator</dt>
+        <dd>
+          <code title="select2/dropdown/search">DropdownSearch</code>
+        </dd>
+      </dl>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>maximumInputLength</code></dd>
+      <p>
+        A search box is added to the top of the dropdown automatically for select
+        boxes where only a single option can be selected.
+      </p>
 
-          <dt>Value</dt>
-          <dd>integer</dd>
-        </dl>
+      <h3 id="dropdown-minimumInputLength">
+        Minimum search term length to filter results
+      </h3>
+
+      <p>
+        Sometimes when working with large data sets, it is more efficient to start
+        filtering the results when the search term is a certain length. This is
+        very common when working with remote data sets, as allows for only
+        significant search terms to be used.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>minimumInputLength</code></dd>
+
+            <dt>Value</dt>
+            <dd>integer</dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/base">DataAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/data/minimumInputLength">MinimumInputLength</code>
+            </dd>
+          </dl>
+        </div>
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/base">DataAdapter</code>
-          </dd>
+      <h3 id="dropdown-maximumInputLength">
+        Maximum search term length to filter results
+      </h3>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/data/maximumInputLength">MaximumInputLength</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        In some cases, search terms need to be limited to a certain range. Select2
+        allows you to limit the length of the search term such that it does not
+        exceed a certain length.
+      </p>
 
-    <h3 id="dropdown-maximumInputLength">
-      Minimum results to display the search box
-    </h3>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>maximumInputLength</code></dd>
 
-    <p>
-      When working with smaller data sets, the search box can take up more space
-      that is necessary, as there are not enough results for filtering to be
-      effective. Select2 allows you to only display the search box when the
-      number of search results reaches a certain threshold.
-    </p>
+            <dt>Value</dt>
+            <dd>integer</dd>
+          </dl>
+        </div>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>minimumResultsForSearch</code></dd>
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/base">DataAdapter</code>
+            </dd>
 
-          <dt>Value</dt>
-          <dd>integer</dd>
-        </dl>
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/data/maximumInputLength">MaximumInputLength</code>
+            </dd>
+          </dl>
+        </div>
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/dropdown">DropdownAdapter</code>
-          </dd>
+      <h3 id="dropdown-maximumInputLength">
+        Minimum results to display the search box
+      </h3>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/dropdown/minimumResultsForSearch">MinimumResultsForSearch</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <p>
+        When working with smaller data sets, the search box can take up more space
+        that is necessary, as there are not enough results for filtering to be
+        effective. Select2 allows you to only display the search box when the
+        number of search results reaches a certain threshold.
+      </p>
 
-    <h2 id="dropdown-select-on-close">
-      Select the highlighted option on close
-    </h2>
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>minimumResultsForSearch</code></dd>
 
-    <p>
-      When users close the dropdown, the last highlighted option can be
-      automatically selected. This is commonly used in combination with
-      <a href="#tags">tagging</a> and <a href="#placeholder">placeholders</a>
-      and other situations where the user is required to select an option, or
-      they need to be able to quickly select multiple options.
-    </p>
+            <dt>Value</dt>
+            <dd>integer</dd>
+          </dl>
+        </div>
 
-    <dl class="dl-horizontal">
-      <dt>Adapter</dt>
-      <dd>
-        <code title="select2/results">ResultsAdapter</code>
-      </dd>
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/dropdown">DropdownAdapter</code>
+            </dd>
 
-      <dt>Decorator</dt>
-      <dd>
-        <code title="select2/dropdown/selectOnClose">SelectOnClose</code>
-      </dd>
-    </dl>
-
-    <h2 id="closeOnSelect">
-      Close the dropdown when a result is selected
-    </h2>
-
-    <p>
-      Select2 will automatically close the dropdown when an element is selected,
-      similar to what is done with a normal select box.  This behavior can be
-      changed though to keep the dropdown open when results are selected,
-      allowing for multiple options to be selected quickly.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd><code>closeOnSelect</code></dd>
-
-          <dt>Default</dt>
-          <dd><code>true</code></dd>
-        </dl>
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/dropdown/minimumResultsForSearch">MinimumResultsForSearch</code>
+            </dd>
+          </dl>
+        </div>
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/dropdown">DropdownAdapter</code>
-          </dd>
+      <h2 id="dropdown-select-on-close">
+        Select the highlighted option on close
+      </h2>
 
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/dropdown/closeOnSelect">CloseOnSelect</code>
-          </dd>
-        </dl>
+      <p>
+        When users close the dropdown, the last highlighted option can be
+        automatically selected. This is commonly used in combination with
+        <a href="#tags">tagging</a> and <a href="#placeholder">placeholders</a>
+        and other situations where the user is required to select an option, or
+        they need to be able to quickly select multiple options.
+      </p>
+
+      <dl class="dl-horizontal">
+        <dt>Adapter</dt>
+        <dd>
+          <code title="select2/results">ResultsAdapter</code>
+        </dd>
+
+        <dt>Decorator</dt>
+        <dd>
+          <code title="select2/dropdown/selectOnClose">SelectOnClose</code>
+        </dd>
+      </dl>
+
+      <h2 id="closeOnSelect">
+        Close the dropdown when a result is selected
+      </h2>
+
+      <p>
+        Select2 will automatically close the dropdown when an element is selected,
+        similar to what is done with a normal select box.  This behavior can be
+        changed though to keep the dropdown open when results are selected,
+        allowing for multiple options to be selected quickly.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd><code>closeOnSelect</code></dd>
+
+            <dt>Default</dt>
+            <dd><code>true</code></dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/dropdown">DropdownAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/dropdown/closeOnSelect">CloseOnSelect</code>
+            </dd>
+          </dl>
+        </div>
       </div>
-    </div>
 
-    <p>
-      If this decorator is not used (or <code>closeOnSelect</code> is set to
-      <code>false</code>), the dropdown will not automatically close when a
-      result is selected.  The dropdown will also never close if the
-      <kbd>ctrl</kbd> key is held down when the result is selected.
-    </p>
-  </section>
+      <p>
+        If this decorator is not used (or <code>closeOnSelect</code> is set to
+        <code>false</code>), the dropdown will not automatically close when a
+        result is selected.  The dropdown will also never close if the
+        <kbd>ctrl</kbd> key is held down when the result is selected.
+      </p>
+    </section>
 
-  <section id="events">
-    <div class="page-header">
-      <h1>Events</h1>
-    </div>
+    <section id="events">
+      <div class="page-header">
+        <h1>Events</h1>
+      </div>
 
-    <p>
-      Select2 has an internal event system that is used to notify parts of the
-      component that state has changed, as well as an adapter that allows some
-      of these events to be relayed to the outside word.
-    </p>
+      <p>
+        Select2 has an internal event system that is used to notify parts of the
+        component that state has changed, as well as an adapter that allows some
+        of these events to be relayed to the outside word.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Adapter</dt>
-      <dd>
-        <code title="select2/selection">SelectionAdapter</code>
-      </dd>
+      <dl class="dl-horizontal">
+        <dt>Adapter</dt>
+        <dd>
+          <code title="select2/selection">SelectionAdapter</code>
+        </dd>
 
-      <dt>Decorator</dt>
-      <dd>
-        <code title="select2/selection/eventRelay">EventRelay</code>
-      </dd>
-    </dl>
+        <dt>Decorator</dt>
+        <dd>
+          <code title="select2/selection/eventRelay">EventRelay</code>
+        </dd>
+      </dl>
 
-    <h2>
-      Public events
-    </h2>
+      <h2 id="events-public">
+        Public events
+      </h2>
 
-    <p>
-      All public events are relayed using the jQuery event system, and they are
-      triggered on the <code>&lt;select&gt;</code> element that Select2 is
-      attached to. You can attach to them using the
-      <a href="https://api.jquery.com/on/"><code>.on</code> method</a> provided
-      by jQuery.
-    </p>
+      <p>
+        All public events are relayed using the jQuery event system, and they are
+        triggered on the <code>&lt;select&gt;</code> element that Select2 is
+        attached to. You can attach to them using the
+        <a href="https://api.jquery.com/on/"><code>.on</code> method</a> provided
+        by jQuery.
+      </p>
 
-    <h2>
-      Internal events
-    </h2>
+      <h2 id="events-internal">
+        Internal events
+      </h2>
 
-    <p>
-      Select2 triggers internal events using its own internal event system,
-      which allows adapters to communicate with each other. These events are not
-      accessible through the jQuery event system.
-    </p>
+      <p>
+        Select2 triggers internal events using its own internal event system,
+        which allows adapters to communicate with each other. These events are not
+        accessible through the jQuery event system.
+      </p>
 
-    <p>
-      You can find more information on the public events triggered by individual
-      adapters in <a href="#adapters">the individual adapter documentation</a>.
-    </p>
-  </section>
+      <p>
+        You can find more information on the public events triggered by individual
+        adapters in <a href="#adapters">the individual adapter documentation</a>.
+      </p>
+    </section>
 
-  <section id="adapters">
-    <div class="page-header">
-      <h1>Adapters</h1>
-    </div>
+    <section id="adapters">
+      <div class="page-header">
+        <h1>Adapters</h1>
+      </div>
 
-    <p>
-      Select2 allows plugins to add additional functionality through the core
-      adapters. You can change almost anything involving the way Select2 works
-      to the way Select2 interacts with the page by modifying the core adapters.
-      Most third-party plugins should provide decorators (used to wrap adapters)
-      and custom adapters that you can use.
-    </p>
+      <p>
+        Select2 allows plugins to add additional functionality through the core
+        adapters. You can change almost anything involving the way Select2 works
+        to the way Select2 interacts with the page by modifying the core adapters.
+        Most third-party plugins should provide decorators (used to wrap adapters)
+        and custom adapters that you can use.
+      </p>
 
-    <p>
-      Each adapter contains a set of methods which will must always be defined.
-      Along with the global methods that all adapters must implement, these
-      methods must be implemented.
-    </p>
+      <p>
+        Each adapter contains a set of methods which will must always be defined.
+        Along with the global methods that all adapters must implement, these
+        methods must be implemented.
+      </p>
 
-    <h2>
-      All adapters
-    </h2>
+      <h2 id="adapters-all">
+        All adapters
+      </h2>
 
-    <p>
-      All adapters must implement a set of methods that Select2 will use to
-      display them and bind any internal events.
-    </p>
+      <p>
+        All adapters must implement a set of methods that Select2 will use to
+        display them and bind any internal events.
+      </p>
 
 <pre class="prettyprint linenums">
 // The basic HTML that should be rendered by Select2. A jQuery or DOM element
@@ -1226,34 +1237,34 @@ Adapter.position = function ($rendered, $defaultContainer) { };
 Adapter.destroy = function () { };
 </pre>
 
-    <h2 id="selectionAdapter">
-      Container (selection)
-    </h2>
+      <h2 id="selectionAdapter">
+        Container (selection)
+      </h2>
 
-    <p>
-      The selection is what is shown to the user as a replacement of the
-      standard <code>&lt;select&gt;</code> box. It controls the display of the
-      selection option(s), as well anything else that needs to be embedded
-      within the container, such as a search box.
-    </p>
+      <p>
+        The selection is what is shown to the user as a replacement of the
+        standard <code>&lt;select&gt;</code> box. It controls the display of the
+        selection option(s), as well anything else that needs to be embedded
+        within the container, such as a search box.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd>
-        <code>selectionAdapter</code>
-      </dd>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd>
+          <code>selectionAdapter</code>
+        </dd>
 
-      <dt>Default</dt>
-      <dd>
-        <code title="select2/selection/single">SingleSelection</code> or
-        <code title="select2/selection/multiple">MultipleSelection</code>
-      </dd>
+        <dt>Default</dt>
+        <dd>
+          <code title="select2/selection/single">SingleSelection</code> or
+          <code title="select2/selection/multiple">MultipleSelection</code>
+        </dd>
 
-      <dt>Base</dt>
-      <dd>
-        <code title="select2/selection/base">BaseSelection</code>
-      </dd>
-    </dl>
+        <dt>Base</dt>
+        <dd>
+          <code title="select2/selection/base">BaseSelection</code>
+        </dd>
+      </dl>
 
 <pre class="prettyprint linenums">
 // Update the selected data.
@@ -1266,31 +1277,31 @@ Adapter.destroy = function () { };
 SelectionAdapter.update = function (data) { };
 </pre>
 
-    <h2 id="dataAdapter">
-      Data set
-    </h2>
+      <h2 id="dataAdapter">
+        Data set
+      </h2>
 
-    <p>
-      The data set is what Select2 uses to generate the possible results that
-      can be selected, as well as the currently selected results.
-    </p>
+      <p>
+        The data set is what Select2 uses to generate the possible results that
+        can be selected, as well as the currently selected results.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd>
-        <code>dataAdapter</code>
-      </dd>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd>
+          <code>dataAdapter</code>
+        </dd>
 
-      <dt>Default</dt>
-      <dd>
-        <code title="select2/data/select">SelectAdapter</code>
-      </dd>
+        <dt>Default</dt>
+        <dd>
+          <code title="select2/data/select">SelectAdapter</code>
+        </dd>
 
-      <dt>Base</dt>
-      <dd>
-        <code title="select2/data/base">BaseAdapter</code>
-      </dd>
-    </dl>
+        <dt>Base</dt>
+        <dd>
+          <code title="select2/data/base">BaseAdapter</code>
+        </dd>
+      </dl>
 
 <pre class="prettyprint linenums">
 // Get the currently selected options. This is called when trying to get the
@@ -1320,295 +1331,300 @@ DataAdapter.query = function (params, callback) {
 }
 </pre>
 
-    <h2 id="dropdownAdapter">
-      Dropdown
-    </h2>
+      <h2 id="dropdownAdapter">
+        Dropdown
+      </h2>
 
-    <p>
-      The dropdown adapter defines the main container that the dropdown should
-      be held in. <strong>It does not define any extra methods that can be used
-      for decorators</strong>, but it is common for decorators to attach to the
-      <code>render</code> and <code>position</code> methods to alter how the
-      dropdown is altered and positioned.
-    </p>
+      <p>
+        The dropdown adapter defines the main container that the dropdown should
+        be held in. <strong>It does not define any extra methods that can be used
+        for decorators</strong>, but it is common for decorators to attach to the
+        <code>render</code> and <code>position</code> methods to alter how the
+        dropdown is altered and positioned.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd>
-        <code>dropdownAdapter</code>
-      </dd>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd>
+          <code>dropdownAdapter</code>
+        </dd>
 
-      <dt>Default</dt>
-      <dd>
-        <code title="select2/dropdown">DropdownAdapter</code>
-      </dd>
-    </dl>
+        <dt>Default</dt>
+        <dd>
+          <code title="select2/dropdown">DropdownAdapter</code>
+        </dd>
+      </dl>
 
-    <h2 id="resultsAdapter">
-      Results
-    </h2>
+      <h2 id="resultsAdapter">
+        Results
+      </h2>
 
-    <p>
-      The results adapter controls the list of results that the user can select
-      from. While the results adapter does not define any additional methods
-      that must be implemented, it makes extensive use of the Select2 event
-      system for controlling the display of results and messages.
-    </p>
+      <p>
+        The results adapter controls the list of results that the user can select
+        from. While the results adapter does not define any additional methods
+        that must be implemented, it makes extensive use of the Select2 event
+        system for controlling the display of results and messages.
+      </p>
 
-    <dl class="dl-horizontal">
-      <dt>Key</dt>
-      <dd>
-        <code>resultsAdapter</code>
-      </dd>
+      <dl class="dl-horizontal">
+        <dt>Key</dt>
+        <dd>
+          <code>resultsAdapter</code>
+        </dd>
 
-      <dt>Default</dt>
-      <dd>
-        <code title="select2/results">ResultsAdapter</code>
-      </dd>
-    </dl>
-  </section>
+        <dt>Default</dt>
+        <dd>
+          <code title="select2/results">ResultsAdapter</code>
+        </dd>
+      </dl>
+    </section>
 
-  <section id="defaults">
-    <div class="page-header">
-      <h1>Setting default options</h1>
-    </div>
+    <section id="defaults">
+      <div class="page-header">
+        <h1>Setting default options</h1>
+      </div>
 
-    <p>
-      In some cases, you need to set the default options for all instances of
-      Select2 in your web application. This is especially useful when you are
-      migrating from past versions of Select2, or you are using non-standard
-      options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
-      default options through <code>$.fn.select2.defaults</code>, which allows
-      you to set them globally.
-    </p>
+      <p>
+        In some cases, you need to set the default options for all instances of
+        Select2 in your web application. This is especially useful when you are
+        migrating from past versions of Select2, or you are using non-standard
+        options <a href="#amd">like custom AMD builds</a>. Select2 exposes the
+        default options through <code>$.fn.select2.defaults</code>, which allows
+        you to set them globally.
+      </p>
 
-    <p>
-      When setting options globally, any past defaults that have been set will
-      be overriden. Default options are only used when an option is requested
-      that has not been set during initialization.
-    </p>
+      <p>
+        When setting options globally, any past defaults that have been set will
+        be overriden. Default options are only used when an option is requested
+        that has not been set during initialization.
+      </p>
 
-    <p>
-      <strong>You can set default options</strong> by calling
-      <code>$.fn.select2.defaults.set("key", "value")</code>. The key that is
-      set should take the same format as keys set using
-      <a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
-      means that two dashes (<code>--</code>) will be replaced by a level of
-      nesting, and a single dash (<code>-</code>) will convert it to a camelCase
-      string.
-    </p>
+      <p>
+        <strong>You can set default options</strong> by calling
+        <code>$.fn.select2.defaults.set("key", "value")</code>. The key that is
+        set should take the same format as keys set using
+        <a href="#data-attributes">HTML <code>data-*</code> attributes</a> which
+        means that two dashes (<code>--</code>) will be replaced by a level of
+        nesting, and a single dash (<code>-</code>) will convert it to a camelCase
+        string.
+      </p>
 
 <pre class="prettyprint linenums">
 $.fn.select2.defaults.set("theme", "classic");
 </pre>
 
-    <p>
-      <strong>You can reset the default options</strong> by calling
-      <code>$.fn.select2.defaults.reset()</code>.
-    </p>
-  </section>
+      <p>
+        <strong>You can reset the default options</strong> by calling
+        <code>$.fn.select2.defaults.reset()</code>.
+      </p>
+    </section>
 
-  <section id="compatibility">
-    <div class="page-header">
-      <h1>Backwards compatibility</h1>
-    </div>
-
-    <p>
-      Select2 offers limited backwards compatibility with the previously 3.5.x
-      release line, allowing people more efficiently transfer across releases
-      and get the latest features. For many of the larger changes, such as the
-      change in how custom data adapters work, compatibility modules were
-      created that will be used to assist in the upgrade process. It is not
-      recommended to rely on these compatibility modules, as they will not
-      always exist, but they make upgrading easier for major changes.
-    </p>
-
-    <p>
-      <strong>The compatibility modules are only included in the
-      <a href="index.html#builds-full" class="alert-link">full builds</a> of
-      Select2</strong>. These files end in <code>.full.js</code>, and the
-      compatibility modules are prefixed with <code>select2/compat</code>.
-    </p>
-
-    <h2 id="compat-matcher">
-      Simplified function for matching data objects
-    </h2>
-
-    <p class="alert alert-info">
-      <a href="announcements-4.0.html#new-matcher" class="alert-link">Added in Select2 4.0.0.</a>
-      This method was added to make upgrading easier from earlier versions of
-      Select2.
-    </p>
-
-    <p>
-      During the <a href="announcements-4.0.html">Select2 4.0.0 release</a>, the
-      <code>matcher</code> function was changed to allow for more complex
-      matching of nested objects.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>matcher</code>
-          </dd>
-
-          <dt>Value</dt>
-          <dd>
-            A function taking a search <code>term</code> and the data object
-            <code>text</code>.
-          </dd>
-        </dl>
+    <section id="compatibility">
+      <div class="page-header">
+        <h1>Backwards compatibility</h1>
       </div>
 
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/compat/matcher">oldMatcher</code>
-          </dd>
-        </dl>
+      <p>
+        Select2 offers limited backwards compatibility with the previously 3.5.x
+        release line, allowing people more efficiently transfer across releases
+        and get the latest features. For many of the larger changes, such as the
+        change in how custom data adapters work, compatibility modules were
+        created that will be used to assist in the upgrade process. It is not
+        recommended to rely on these compatibility modules, as they will not
+        always exist, but they make upgrading easier for major changes.
+      </p>
+
+      <p>
+        <strong>The compatibility modules are only included in the
+        <a href="index.html#builds-full" class="alert-link">full builds</a> of
+        Select2</strong>. These files end in <code>.full.js</code>, and the
+        compatibility modules are prefixed with <code>select2/compat</code>.
+      </p>
+
+      <h2 id="compat-matcher">
+        Simplified function for matching data objects
+      </h2>
+
+      <p class="alert alert-info">
+        <a href="announcements-4.0.html#new-matcher" class="alert-link">Added in Select2 4.0.0.</a>
+        This method was added to make upgrading easier from earlier versions of
+        Select2.
+      </p>
+
+      <p>
+        During the <a href="announcements-4.0.html">Select2 4.0.0 release</a>, the
+        <code>matcher</code> function was changed to allow for more complex
+        matching of nested objects.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>matcher</code>
+            </dd>
+
+            <dt>Value</dt>
+            <dd>
+              A function taking a search <code>term</code> and the data object
+              <code>text</code>.
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/compat/matcher">oldMatcher</code>
+            </dd>
+          </dl>
+        </div>
       </div>
-    </div>
 
-    <p>
-      The <a href="examples.html#matcher">custom matcher example</a> provides a
-      guide for how to use this in your own application. For those upgrading
-      from older versions of Select2, you just need to wrap your old
-      <code>matcher</code> with this function to maintain compatibility.
-    </p>
+      <p>
+        The <a href="examples.html#matcher">custom matcher example</a> provides a
+        guide for how to use this in your own application. For those upgrading
+        from older versions of Select2, you just need to wrap your old
+        <code>matcher</code> with this function to maintain compatibility.
+      </p>
 
-    <h2 id="initSelection">
-      Old initial selections with <code>initSelection</code>
+      <h2 id="initSelection">
+        Old initial selections with <code>initSelection</code>
+      </h2>
+
+      <p class="alert alert-warning">
+        <a href="announcements-4.0.html#removed-initselection" class="alert-link">Deprecated in Select2 4.0.</a>
+        This has been replaced by another option and is only available in the
+        <a href="index.html#builds-full" class="alert-link">full builds</a> of
+        Select2.
+      </p>
+
+      <p>
+        In the past, Select2 required an option called <code>initSelection</code>
+        that was defined whenever a custom data source was being used, allowing
+        for the initial selection for the component to be determined. This has
+        been replaced by the <code>current</code> method on the
+        <a href="#dataAdapter">data adapter</a>.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>initSelection</code>
+            </dd>
+
+            <dt>Value</dt>
+            <dd>
+              A function taking a <code>callback</code>
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/base">DataAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/compat/initSelection">InitSelection</code>
+            </dd>
+          </dl>
+        </div>
+      </div>
+
+      <h2 id="query">
+        Querying old data with <code>query</code>
+      </h2>
+
+      <p class="alert alert-warning">
+        <a href="announcements-4.0.html#query-to-data-adapter" class="alert-link">Deprecated in Select2 4.0.</a>
+        This has been replaced by another option and is only available in the
+        <a href="index.html#builds-full" class="alert-link">full builds</a> of
+        Select2.
+      </p>
+
+      <p>
+        In the past, Select2 supported an option called <code>query</code> that
+        allowed for a custom data source to be used. This option has been replaced
+        by the <code>query</code> method on the
+        <a href="#dataAdapter">data adapter</a> and takes a very similar set of
+        parameters.
+      </p>
+
+      <div class="row">
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Key</dt>
+            <dd>
+              <code>query</code>
+            </dd>
+
+            <dt>Value</dt>
+            <dd>
+              A function taking <code>params</code> (including a <code>callback</code>)
+            </dd>
+          </dl>
+        </div>
+
+        <div class="col-sm-6">
+          <dl class="dl-horizontal">
+            <dt>Adapter</dt>
+            <dd>
+              <code title="select2/data/base">DataAdapter</code>
+            </dd>
+
+            <dt>Decorator</dt>
+            <dd>
+              <code title="select2/compat/query">Query</code>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </section>
+
+    <h2 id="input-fallback">
+      Compatibility with <code>&lt;input type="text" /&gt;</code>
     </h2>
 
     <p class="alert alert-warning">
-      <a href="announcements-4.0.html#removed-initselection" class="alert-link">Deprecated in Select2 4.0.</a>
-      This has been replaced by another option and is only available in the
-      <a href="index.html#builds-full" class="alert-link">full builds</a> of
-      Select2.
+      <a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
+      It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
     </p>
 
     <p>
-      In the past, Select2 required an option called <code>initSelection</code>
-      that was defined whenever a custom data source was being used, allowing
-      for the initial selection for the component to be determined. This has
-      been replaced by the <code>current</code> method on the
-      <a href="#dataAdapter">data adapter</a>.
+      In past versions of Select2, a <code>&lt;select&gt;</code> element could
+      only be used with a limited subset of options. An
+      <code>&lt;input type="hidden" /&gt;</code> was required instead, which did
+      not allow for a graceful fallback for users who did not have JavaScript
+      enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
+      all options, so it is no longer required to use <code>&lt;input /&gt;</code>
+      elements with Select2.
     </p>
 
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>initSelection</code>
-          </dd>
+    <dl class="dl-horizontal">
+      <dt>Adapter</dt>
+      <dd>
+        <code title="select2/data/base">DataAdapter</code>
+      </dd>
 
-          <dt>Value</dt>
-          <dd>
-            A function taking a <code>callback</code>
-          </dd>
-        </dl>
-      </div>
-
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/base">DataAdapter</code>
-          </dd>
-
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/compat/initSelection">InitSelection</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
-
-    <h2 id="query">
-      Querying old data with <code>query</code>
-    </h2>
-
-    <p class="alert alert-warning">
-      <a href="announcements-4.0.html#query-to-data-adapter" class="alert-link">Deprecated in Select2 4.0.</a>
-      This has been replaced by another option and is only available in the
-      <a href="index.html#builds-full" class="alert-link">full builds</a> of
-      Select2.
-    </p>
-
-    <p>
-      In the past, Select2 supported an option called <code>query</code> that
-      allowed for a custom data source to be used. This option has been replaced
-      by the <code>query</code> method on the
-      <a href="#dataAdapter">data adapter</a> and takes a very similar set of
-      parameters.
-    </p>
-
-    <div class="row">
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Key</dt>
-          <dd>
-            <code>query</code>
-          </dd>
-
-          <dt>Value</dt>
-          <dd>
-            A function taking <code>params</code> (including a <code>callback</code>)
-          </dd>
-        </dl>
-      </div>
-
-      <div class="col-sm-6">
-        <dl class="dl-horizontal">
-          <dt>Adapter</dt>
-          <dd>
-            <code title="select2/data/base">DataAdapter</code>
-          </dd>
-
-          <dt>Decorator</dt>
-          <dd>
-            <code title="select2/compat/query">Query</code>
-          </dd>
-        </dl>
-      </div>
-    </div>
+      <dt>Decorator</dt>
+      <dd>
+        <code title="select2/compat/inputData">InputData</code>
+      </dd>
+    </dl>
   </section>
-
-  <h2 id="input-fallback">
-    Compatibility with <code>&lt;input type="text" /&gt;</code>
-  </h2>
-
-  <p class="alert alert-warning">
-    <a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
-    It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
-  </p>
-
-  <p>
-    In past versions of Select2, a <code>&lt;select&gt;</code> element could
-    only be used with a limited subset of options. An
-    <code>&lt;input type="hidden" /&gt;</code> was required instead, which did
-    not allow for a graceful fallback for users who did not have JavaScript
-    enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
-    all options, so it is no longer required to use <code>&lt;input /&gt;</code>
-    elements with Select2.
-  </p>
-
-  <dl class="dl-horizontal">
-    <dt>Adapter</dt>
-    <dd>
-      <code title="select2/data/base">DataAdapter</code>
-    </dd>
-
-    <dt>Decorator</dt>
-    <dd>
-      <code title="select2/compat/inputData">InputData</code>
-    </dd>
-  </dl>
-</section>
+  </div>
+  <div class="col-md-3" role="complementary">
+    {% include nav/options.html %}
+  </div>
+</div>
 </div>
 
 <script type="text/javascript">
diff --git a/docs/vendor/css/prettify.css b/docs/vendor/css/prettify.css
index 7980e7c7..dca5d032 100644
--- a/docs/vendor/css/prettify.css
+++ b/docs/vendor/css/prettify.css
@@ -8,14 +8,15 @@
 .pln { color: #48484c; }
 
 .prettyprint {
-  padding: 8px;
+  padding: 9px 14px;
+  margin-bottom: 14px;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
 .prettyprint.linenums {
-  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+  -webkit-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
+     -moz-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
+          box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
 }
 
 /* Specify class=linenums on a pre to get line numbering */
@@ -23,7 +24,7 @@ ol.linenums {
   margin: 0;
 }
 ol.linenums li {
-  padding-left: 12px;
+  padding-left: 4px;
   color: #bebec5;
   line-height: 18px;
 }