jquery: Add search suggestions based on Algolia's DocSearch

This commit adds DocSearch to the documentation website. It allows a user to have a learn-as-you-type experience by displaying results thanks to a dropdown in a live way.

If there is no result, pressing enter will enable the legacy search.

Fixes jquery/api.jquery.com#1104
Closes jquery#416

Author: Sylvain Pace

themes/jquery/css/docsearch.css

@@ -0,0 +1,19 @@
+/* Custom DocSeach CSS to adapt the generic one * See https://community.algolia.com/docsearch/styling.html for more info */
+nav#main .searchform {
+	text-shadow: none;
+}
+
+.searchform label {
+	width: 100%;
+	display: block;
+}
+
+.algolia-autocomplete {
+	width: 99%;
+}
+
+@media only screen and (max-width: 480px) {
+	.ds-dropdown-menu {
+		min-width: 100% !important;
+	}
+}

themes/jquery/footer.php

@@ -37,6 +37,11 @@
 </footer>
 
 <?php wp_footer(); ?>
-
+	<!-- at the end of the BODY -->
+	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
+		indexName: 'jquery',
+		inputSelector: 'input[name=\'s\']',
+		debug: true // Set debug to true if you want to inspect the dropdown
+	})" async></script>
 </body>
 </html>

themes/jquery/header.php

@@ -35,6 +35,9 @@
 
 	<script src="https://use.typekit.net/wde1aof.js"></script>
 	<script>try{Typekit.load();}catch(e){}</script>
+	<!-- at the end of the HEAD -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/docsearch.css">
 
 <?php
 	if ( is_singular() && get_option( 'thread_comments' ) )