[SPARK-33166][DOC] Provide Search Function in Spark docs site

docs/_layouts/global.html

@@ -30,6 +30,8 @@
         <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
 
         <link rel="stylesheet" href="css/pygments-default.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+        <link rel="stylesheet" href="css/docsearch.css">
 
         {% production %}
         <!-- Google analytics script -->
@@ -125,6 +127,10 @@
                                 <a class="dropdown-item" href="https://spark.apache.org/third-party-projects.html">Third Party Projects</a>
                             </div>
                         </li>
+
+                        <li class="nav-item">
+                            <input type="text" id="docsearch-input" placeholder="Search the docs…">
+                        </li>
                     </ul>
                     <!--<span class="navbar-text navbar-right"><span class="version-text">v{{site.SPARK_VERSION_SHORT}}</span></span>-->
                 </div>
@@ -172,6 +178,23 @@ <h1 class="title">{{ page.title }}</h1>
         <script src="js/vendor/bootstrap.bundle.min.js"></script>
         <script src="js/vendor/anchor.min.js"></script>
         <script src="js/main.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+        <script type="text/javascript">
+            // DocSearch is entirely free and automated. DocSearch is built in two parts:
+            // 1. a crawler which we run on our own infrastructure every 24 hours. It follows every link
+            //    in your website and extract content from every page it traverses. It then pushes this
+            //    content to an Algolia index.
+            // 2. a JavaScript snippet to be inserted in your website that will bind this Algolia index
+            //    to your search input and display its results in a dropdown UI. If you want to find more
+            //    details on how works DocSearch, check the docs of DocSearch.
+            docsearch({
+                apiKey: 'b18ca3732c502995563043aa17bc6ecb',
+                indexName: 'apache_spark',
+                inputSelector: '#docsearch-input',
+                enhancedSearchInput: true,
+                debug: false // Set debug to true if you want to inspect the dropdown
+        });
+        </script>
 
         <!-- MathJax Section -->
         <script type="text/x-mathjax-config">

docs/css/docsearch.css

@@ -0,0 +1,36 @@
+/* Main dropdown wrapper */
+.algolia-autocomplete .ds-dropdown-menu {
+    width: 500px;
+}
+
+/* Main category (eg. Getting Started) */
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+    color: darkgray;
+    border: 1px underline gray;
+}
+
+/* Category (eg. Downloads) */
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    color: gray;
+}
+
+/* Title (eg. Bootstrap CDN) */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+    font-weight: bold;
+    color: black;
+}
+
+/* Description description (eg. Bootstrap currently works...) */
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+    font-size: 0.8rem;
+    color: gray;
+}
+
+/* Highlighted text */
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+    color: blue;
+}
+
+.searchbox {
+    margin-top: 2%;
+}