Typahead stuff

_layouts/default.html

@@ -39,14 +39,14 @@
 					</li>
 				</ul>
 				<div class="form-inline my-2 my-lg-0">
-					<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search">
+					<input id="search" class="typeahead form-control mr-sm-2" type="text" placeholder="Search">
+					<!-- <a href="#" id="search-results-trigger" data-toggle="dropdown"></a>
+					<div class="dropdown-menu" id="search-results"></div> -->
 				</div>
 			</div>
 		</nav>
 	</header>
 
-	<div class="dropdown-menu" id="search-results"></div>
-
 	<div class="main-content container">
 		{{ content }}
 	</div>
@@ -78,6 +78,7 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 	<script src="/js/tether.min.js"></script>
 	<script src="/js/bootstrap.min.js"></script>
+	<script src="/js/typeahead.js"></script>
 	<script src="/js/main.js"></script>
 </body>
 </html>

js/main.js

@@ -1,43 +1,87 @@
+let searchData;
+function getSearchData() {
+	if (searchData) {
+		return new Promise((resolve, reject) => {
+			resolve(searchData);
+		});
+	} else {
+		return fetch("/search.json")
+			.then(res => res.json());
+	}
+}
+
+function matcher(q, cb) {
+	getSearchData()
+		.then(data => {
+			cb(Object.keys(data)
+				.map(fuzzy_match.bind(null, q))
+				.sort((a, b) => b[1] - a[1])
+				.slice(0, 5)
+				.map(res => {
+					const formatted = res[3];
+					const url = data[res[2]];
+					return `<a href="${url}">${formatted}</a>`;
+				}));
+		})
+}
+
 $(document).ready(() => {
 	$("[data-toggle='tooltip']").tooltip();
 
-	$("#search").on("input", () => {
-		const results = $("#search-results");
-		const q = $("#search").val().trim();
-
-		if (q.length == 0) {
-			results.hide();
-			return;
-		} else {
-			results.show();
-		}
-
-		getSearchData()
-			.then(data => {
-				results.html(Object.keys(data)
-					.map(fuzzy_match.bind(null, q))
-					.sort((a, b) => b[1] - a[1])
-					.slice(0, 5)
-					.map(res => {
-						const formatted = res[3];
-						const url = data[res[2]];
-						return `<a href="${url}" class="dropdown-item">${formatted}</a>`;
-					})
-					.join(""));
-			});
+	
+
+	$("#search").typeahead({
+		hint: true,
+		highlight: true,
+		minLength: 1
+	}, {
+		name: "search",
+		source: matcher
 	});
 
-	let searchData;
-	function getSearchData() {
-		if (searchData) {
-			return new Promise((resolve, reject) => {
-				resolve(searchData);
-			});
-		} else {
-			return fetch("/search.json")
-				.then(res => res.json());
-		}
-	}
+	// let dropdownShown = false;
+	// $("#search-results-trigger").on("shown.bs.dropdown", () => {
+	// 	console.log("shown");
+	// 	dropdownShown = true;
+	// });
+	// $("#search-results-trigger").on("hidden.bs.dropdown", () => {
+	// 	console.log("hidden");
+	// 	dropdownShown = false;
+	// });
+
+	// $("#search").on("input", () => {
+	// 	const results = $("#search-results");
+	// 	const q = $("#search").val().trim();
+
+	// 	if (q.length == 0) {
+	// 		if (dropdownShown) {
+	// 			$("#search-results-trigger").dropdown("toggle");
+	// 			$("#search").focus();
+	// 		}
+	// 		// results.hide();
+	// 		return;
+	// 	} else {
+	// 		if (!dropdownShown) {
+	// 			$("#search-results-trigger").dropdown("toggle");
+	// 			$("#search").focus();
+	// 		}
+	// 		// results.show();
+	// 	}
+
+	// 	getSearchData()
+	// 		.then(data => {
+	// 			results.html(Object.keys(data)
+	// 				.map(fuzzy_match.bind(null, q))
+	// 				.sort((a, b) => b[1] - a[1])
+	// 				.slice(0, 5)
+	// 				.map(res => {
+	// 					const formatted = res[3];
+	// 					const url = data[res[2]];
+	// 					return `<a href="${url}" class="dropdown-item">${formatted}</a>`;
+	// 				})
+	// 				.join(""));
+	// 		});
+	// });
 });
 
 // Source: https://github.com/forrestthewoods/lib_fts