Merge pull request #10 from E-Sh4rk/search

allow searching for a code

Author: E-Sh4rk

html/index.html

@@ -6,6 +6,8 @@
     <title>Pokemon Emerald 0x611 ACE generator</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="autocomplete.css">
+    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
     <script src="ace_js.bc.js?2"></script>
     <script src="config.js"></script>
     <script src="scripts.js"></script>
@@ -40,9 +42,7 @@ <h2><a class="tablinks-active">Main code</a> /
             <option value="bootstraps">ACE bootstraps</option>
             <option value="misc">Misc</option>
           </select>
-          <select id="select" class="right grow">
-            <option value='' selected>----------</option>
-          </select>
+          <select id="select" class="right grow"></select>
         </div>
         <div class="container grow" id="container">
           <textarea id="main" spellcheck="false"></textarea>

html/index_frlg.html

@@ -6,6 +6,8 @@
     <title>Pokemon FRLG ACE generator</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="autocomplete.css">
+    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
     <script src="ace_js.bc.js?2"></script>
     <script src="config.js"></script>
     <script src="scripts.js"></script>
@@ -44,9 +46,7 @@ <h2><a class="tablinks-active">Main code</a> /
           <select style="display:none;" id="cat" class="middle">
             <option value="">All categories</option>
           </select>
-          <select id="select" class="right grow">
-            <option value='' selected>----------</option>
-          </select>
+          <select id="select" class="right grow"></select>
         </div>
         <div class="container grow" id="container">
           <textarea id="main" spellcheck="false"></textarea>

html/index_rs.html

@@ -6,6 +6,8 @@
     <title>Pokemon Ruby/Sapphire ACE generator</title>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="autocomplete.css">
+    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
     <script src="ace_js.bc.js?2"></script>
     <script src="config.js"></script>
     <script src="scripts.js"></script>
@@ -43,9 +45,7 @@ <h2><a class="tablinks-active">Main code</a> /
           <select style="display:none;" id="cat" class="middle">
             <option value="">All categories</option>
           </select>
-          <select id="select" class="right grow">
-            <option value='' selected>----------</option>
-          </select>
+          <select id="select" class="right grow"></select>
         </div>
         <div class="container grow" id="container">
           <textarea id="main" spellcheck="false"></textarea>

html/scripts.js

@@ -12,6 +12,14 @@ window.addEventListener ("load", () => {
     let cat = document.getElementById ("cat");
     let game = document.getElementById ("game");
 
+    let ts = new TomSelect(select, {
+        create: false,
+        maxOptions: null,
+        placeholder: '----------',
+        wrapperClass: 'ts-wrapper right grow',
+        sortField: { field: '$order', direction: 'asc' },
+    });
+
     let lock = false;
     let examples = null;
     let last_selected_example = "";
@@ -71,24 +79,22 @@ window.addEventListener ("load", () => {
         let language = lang.value;
         let gam = game.value;
         let category = cat.value;
-        //last_selected_example = select.value;
-        let newSelectedIndex = 0;
-        
-        let arrOptions = ["<option value='' selected>----------</option>"];
-        let i = 1;
+        let options = [];
+        let newSelectedValue = '';
         examples.forEach((element,index) => {
             if (language in element
                 && (category == "" || ("cat" in element && element["cat"].includes(category)))
                 && (gam == "" || ("game" in element && element["game"].includes(gam)))) {
                 let val = index.toString();
-                if (val == last_selected_example) newSelectedIndex = i;
-                arrOptions.push("<option value='"+val+"'>"+element["name"]+"</option>");
-                i += 1;
+                if (val == last_selected_example) newSelectedValue = val;
+                options.push({ value: val, text: element["name"] });
             }
         });
 
-        select.innerHTML = arrOptions.join("\n");
-        select.selectedIndex = newSelectedIndex;
+        ts.clear(true);
+        ts.clearOptions();
+        options.forEach(o => ts.addOption(o));
+        ts.setValue(newSelectedValue, true);
 
         updateCode();
     }
@@ -119,8 +125,8 @@ window.addEventListener ("load", () => {
     if (gameval)
         game.value = gameval;
 
-    select.addEventListener ("change", () => {
-        last_selected_example = select.value;
+    ts.on('change', (value) => {
+        last_selected_example = value;
         updateCode();
     });
 

html/style.css

@@ -9,7 +9,11 @@ a {
 }
 
 select {
-    height: 20px;
+    background-color: #fff;
+    border: 1px solid #d0d0d0;
+    border-radius: 3px;
+    padding: 1px 6px;
+    height: unset;
 }
 
 @font-face {
@@ -102,6 +106,27 @@ textarea {
     display: none;
   }
 
+/* Tom Select */
+
+.ts-wrapper {
+    align-self: center;
+}
+
+.ts-control {
+    min-height: unset !important;
+    padding: 1px 6px !important;
+    font-size: inherit;
+    flex-wrap: nowrap !important;
+}
+
+.ts-dropdown {
+    font-size: inherit;
+}
+
+.ts-dropdown .ts-dropdown-content {
+    max-height: 400px;
+}
+
 /* Other scripts */
 
 #enter {