Pass docs version to search form and switch to the new index.

Also, move the search code to a separate file.

README.md

@@ -105,7 +105,7 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:
 
 Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.
 
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `assets/js/application.js` file.
+Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `assets/js/src/search.js` file.
 
 ### Running documentation locally
 

_includes/docs-sidebar.html

@@ -1,5 +1,5 @@
 <form class="bd-search d-flex align-items-center">
-  <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-siteurl="{{ site.url }}">
+  <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-siteurl="{{ site.url }}" data-docs-version="{{ site.docs_version }}">
   <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
     {%- include icons/menu.svg width="30" height="30" -%}
   </button>

_includes/scripts.html

@@ -20,6 +20,7 @@
   <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/search.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {%- endif -%}

assets/js/src/application.js

@@ -101,34 +101,6 @@
     anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
     $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
 
-    // Search
-    if (window.docsearch) {
-      window.docsearch({
-        apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
-        indexName: 'bootstrap-v4',
-        inputSelector: '#search-input',
-        handleSelected: function (input, event, suggestion) {
-          var url = suggestion.url
-          url = suggestion.isLvl1 ? url.split('#')[0] : url
-          // If it's a title we remove the anchor so it does not jump.
-          window.location.href = url
-        },
-        transformData: function (hits) {
-          return hits.map(function (hit) {
-            // When in production, return the result as is,
-            // otherwise remove our url from it.
-            var siteurl = document.getElementById('search-input').getAttribute('data-siteurl')
-            var urlRE = /^https?:\/\/getbootstrap\.com/
-
-            hit.url = siteurl.match(urlRE) ? hit.url : hit.url.replace(urlRE, '')
-
-            return hit
-          })
-        },
-        debug: false // Set debug to true if you want to inspect the dropdown
-      })
-    }
-
     // Holder
     Holder.addTheme('gray', {
       bg: '#777',

assets/js/src/search.js

@@ -0,0 +1,38 @@
+(function () {
+  'use strict'
+
+  if (!window.docsearch) {
+    return
+  }
+
+  var inputElement = document.getElementById('search-input')
+  var siteDocsVersion = inputElement.getAttribute('data-docs-version')
+
+  window.docsearch({
+    apiKey: '5990ad008512000bba2cf951ccf0332f',
+    indexName: 'bootstrap',
+    inputSelector: '#search-input',
+    algoliaOptions: {
+      facetFilters: ['version:' + siteDocsVersion]
+    },
+    handleSelected: function (input, event, suggestion) {
+      var url = suggestion.url
+      url = suggestion.isLvl1 ? url.split('#')[0] : url
+      // If it's a title we remove the anchor so it does not jump.
+      window.location.href = url
+    },
+    transformData: function (hits) {
+      return hits.map(function (hit) {
+        // When in production, return the result as is,
+        // otherwise remove our url from it.
+        var siteurl = inputElement.getAttribute('data-siteurl')
+        var urlRE = /^https?:\/\/getbootstrap\.com/
+
+        hit.url = siteurl.match(urlRE) ? hit.url : hit.url.replace(urlRE, '')
+
+        return hit
+      })
+    },
+    debug: false // Set debug to true if you want to inspect the dropdown
+  })
+}())