From b395b7837ab483c73e2a79f97e2686c815797b99 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Wed, 1 Nov 2017 21:17:23 +0100
Subject: [PATCH 1/2] Add support for search query in URL

As discussed in #648, implemented JavaScript based support for a search
query in the URL. This feature does two things:
1. If you go to `www.simpleicons.org/?q=adobe`, the page will load with
a search query for the string `'adobe'`.
2. If you start searching on `www.simpleicons.org`, the url will be
updated with each keystroke to `www.simpleicons.org/?q=hellowor`.

Since `window.history.replaceState` is being used, this changing of the
URL does not mess with the browser history. I.e. if the user came from
www.google.com, started searching and press the back button they will
return to www.google.com immediately.
---
 index.html | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 018098bdf..5db7a7a4d 100644
--- a/index.html
+++ b/index.html
@@ -536,12 +536,13 @@
     {% endfor %}
     <script type="text/javascript">
         (function(document) {
-            var icons        = [{{ allIconNames }}].map(normalizeSearchTerm),
-                $grid        = document.querySelector('.grid'),
-                $icons       = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
-                $search      = document.querySelector('.search'),
-                $searchClose = $search.querySelector('.search__close'),
-                $searchInput = $search.querySelector('input');
+            var icons          = [{{ allIconNames }}].map(normalizeSearchTerm),
+                queryParameter = 'q',
+                $grid          = document.querySelector('.grid'),
+                $icons         = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
+                $search        = document.querySelector('.search'),
+                $searchClose   = $search.querySelector('.search__close'),
+                $searchInput   = $search.querySelector('input');
 
             // Remove the "disabled" attribute from the search input
             $searchInput.setAttribute('title', 'Search Simple Icons');
@@ -603,14 +604,25 @@
                 return value.toLowerCase().replace(/ /g, '');
             }
 
+            document.addEventListener('DOMContentLoaded', function() {
+                // Load search query if present
+                var query = new URLSearchParams(window.location.search).get(queryParameter);
+                if (query !== null) {
+                    $search.classList.add('search--active');
+                    $searchInput.value = query;
+                    search(query);
+                }
+            });
             $search.addEventListener('input', debounce(function(e) {
                 e.preventDefault();
 
                 var value = e.target.value;
                 if (value) {
                     $search.classList.add('search--active');
+                    window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
                 } else {
                     $search.classList.remove('search--active');
+                    window.history.replaceState(null, '', '/');
                 }
                 search(value);
             }, 50), false);
@@ -619,6 +631,7 @@
 
                 $searchInput.value = '';
                 $search.classList.remove('search--active');
+                window.history.replaceState(null, '', '/');
                 search('');
             }, false);
         })( document );

From bc97a6e0ec01a020c5e92f2b4331521e932cec02 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Wed, 1 Nov 2017 22:55:05 +0100
Subject: [PATCH 2/2] Use custom URL parser for query parameter

As pointed out by @birjolaxew, URLSearchParams isn't supported by IE.
Hence, adding a custom URL parser to get the query parameter.
---
 index.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5db7a7a4d..ba245cc68 100644
--- a/index.html
+++ b/index.html
@@ -584,6 +584,17 @@
                 };
             }
 
+            // Get any parameter from the URL's search section (location.search).
+            // see
+            //   - https://davidwalsh.name/query-string-javascript
+            //   - https://github.com/WebReflection/url-search-params
+            function getUrlParameter(parameter) {
+                name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+                var results = regex.exec(location.search);
+                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+            }
+
             function search(value) {
                 var hiddenCounter = 0,
                     value = normalizeSearchTerm(value);
@@ -606,7 +617,7 @@
 
             document.addEventListener('DOMContentLoaded', function() {
                 // Load search query if present
-                var query = new URLSearchParams(window.location.search).get(queryParameter);
+                var query = getUrlParameter(queryParameter);
                 if (query !== null) {
                     $search.classList.add('search--active');
                     $searchInput.value = query;