From 3e39bbf4a19e3ce503015594446f4857d83f9155 Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Sat, 13 Mar 2021 10:22:04 +0000
Subject: [PATCH] Docs: Added ?q= support

---
 docs/index.html     | 51 +++++++++++++++++++++++++++++++++++++++------
 examples/index.html |  7 +++----
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 4d3e32aa9555bc..ffd4a538c31250 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -133,6 +133,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 
 			// Functionality for search/filter input field
+
 			filterInput.onfocus = function () {
 
 				panel.classList.add( 'searchFocused' );
@@ -149,17 +150,17 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 			};
 
-			exitSearchButton.onclick = function () {
+			filterInput.oninput = function () {
 
-				filterInput.value = '';
 				updateFilter();
-				panel.classList.remove( 'searchFocused' );
 
 			};
 
-			filterInput.oninput = function () {
+			exitSearchButton.onclick = function () {
 
+				filterInput.value = '';
 				updateFilter();
+				panel.classList.remove( 'searchFocused' );
 
 			};
 
@@ -172,6 +173,18 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 			createNavigation( list, language );
 			createNewIframe();
 
+			// Handle search query
+
+			filterInput.value = extractQuery();
+
+			if ( filterInput.value !== '' ) {
+
+				panel.classList.add( 'searchFocused' );
+
+			}
+
+			updateFilter();
+
 		}
 
 		// Navigation Panel
@@ -305,10 +318,36 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 		// Filtering
 
+		function extractQuery() {
+
+			const search = window.location.search;
+
+			if ( search.indexOf( '?q=' ) !== - 1 ) {
+
+				return decodeURI( search.substr( 3 ) );
+
+			}
+
+			return '';
+
+		}
+
 		function updateFilter() {
 
-			// (uncomment the following line and the "Query strings" section, if you want query strings):
-			// updateQueryString();
+			let v = filterInput.value.trim();
+			v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
+
+			if ( v !== '' ) {
+
+				window.history.replaceState( {}, '', '?q=' + v + window.location.hash );
+
+			} else {
+
+				window.history.replaceState( {}, '', window.location.pathname + window.location.hash );
+
+			}
+
+			//
 
 			const regExp = new RegExp( filterInput.value, 'gi' );
 
diff --git a/examples/index.html b/examples/index.html
index e8434b3ed80ff6..c40b5e229705f4 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -342,11 +342,11 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 		function extractQuery() {
 
-			const p = window.location.search.indexOf( '?q=' );
+			const search = window.location.search;
 
-			if ( p !== - 1 ) {
+			if ( search.indexOf( '?q=' ) !== - 1 ) {
 
-				return decodeURI( window.location.search.substr( 3 ) );
+				return decodeURI( search.substr( 3 ) );
 
 			}
 
@@ -354,7 +354,6 @@ <h1><a href="https://threejs.org">three.js</a></h1>
 
 		}
 
-
 		function createElementFromHTML( htmlString ) {
 
 			const div = document.createElement( 'div' );