typescript-bot
diff --git a/‎assets/script/search.ts
Lines changed: 33 additions & 2 deletions b/‎assets/script/search.ts
Lines changed: 33 additions & 2 deletions
diff --git a/‎assets/static/index.html
Lines changed: 0 additions & 7 deletions b/‎assets/static/index.html
Lines changed: 0 additions & 7 deletions
@@ -19,8 +19,7 @@ interface Bloodhound<T> {
 	local: T[];
 }
 
-function typeSearch(el: HTMLInputElement) {
-	const jqueryEl = $(el);
+function typeSearch(jqueryEl: JQuery, search?: string) {
 	const opts: Twitter.Typeahead.Options = {
 		highlight: true,
 		minLength: 0
@@ -47,13 +46,30 @@ function typeSearch(el: HTMLInputElement) {
 		if (k.keyCode === 13) { // Enter key
 			const selectables = jqueryEl.siblings(".tt-menu").find(".tt-selectable");
 			$(selectables[0]).trigger("click");
+		} else {
+			updateSearch(jqueryEl.val());
 		}
 	});
 
+	if (search) {
+		jqueryEl.typeahead('val', search).typeahead('open');
+	}
+
 	function navigate(record: MinifiedSearchRecord) {
 		window.location.href = `https://www.npmjs.org/package/@types/${record.t}`;
 	}
 
+	function updateSearch(newValue: string) {
+		if (!URLSearchParams) {
+			return;
+		}
+
+		const params = new URLSearchParams(window.location.search);
+		params.set('search', newValue);
+
+		history.pushState(null, '', `${window.location.pathname}?${params}`);
+	}
+
 	function createDataSource(): Bloodhound<MinifiedSearchRecord> {
 		let query = "";
 		return new Bloodhound<MinifiedSearchRecord>({
@@ -83,3 +99,18 @@ function typeSearch(el: HTMLInputElement) {
 		});
 	}
 }
+
+$(() => {
+	const params = window.location.search
+		.substring(1)
+		.split('&')
+		.reduce<Record<string, string>>((params, pair) => {
+			const [key, value] = pair.split('=');
+			params[key] = value;
+			return params;
+		}, {});
+	const jqueryEl = $("#demo");
+
+	typeSearch(jqueryEl, params.search);
+	jqueryEl.focus();
+});
@@ -8,13 +8,6 @@
     <script src="lib/jquery.min.js"></script>
     <script src="lib/typeahead.bundle.min.js"></script>
     <script src="script/search.js"></script>
-    <script>
-    	$(function() {
-        var el = document.getElementById('demo');
-        typeSearch(el);
-        $(el).focus();
-    	});
-    </script>
   </head>
   <body>
     <h1><span class="typescript"><span class="bold">Type</span>Search</span></h1>