Add quick search buttons

css/style.css

@@ -2,6 +2,16 @@
     width: 100%;
 }
 
+#quick-search {
+    text-align: center;
+}
+#quick-search button {
+    padding: 6.5px;
+    font-size: 9pt;
+    margin-right: 0;
+    margin-left: 0;
+}
+
 #products-list,
 #msdl-ms-content,
 #msdl-please-wait,

index.html

@@ -33,6 +33,12 @@
         <div id="products-list">
             <h2>Select product</h2>
             <input id="search-products" type="search" placeholder="Search with regex..." onInput="updateResults();">
+            <div id="quick-search">
+                📌
+                <button onClick="setSearch('Windows 8\\.1');">Windows 8.1</button>
+                <button onClick="setSearch('Windows 10');">Windows 10</button>
+                <button onClick="setSearch('Windows 11');">Windows 11</button>
+            </div>
             <table style="table-layout: auto;">
                 <thead>
                     <tr>

js/msdl.js

@@ -184,6 +184,12 @@ function updateResults() {
     createTable(availableProducts, search.value);
 }
 
+function setSearch(query) {
+    var search = document.getElementById('search-products');
+    search.value = query;
+    updateResults();
+}
+
 function checkHash() {
     var hash = window.location.hash;
     if(hash.length == 0)