searchable select if js is enabled

public/css/nice-select2.css

@@ -0,0 +1 @@
+.nice-select{-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#2f2f2f;border-radius:5px;border:solid 1px #e8e8e8;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-family:inherit;font-size:14px;font-weight:normal;height:38px;line-height:36px;outline:none;padding-left:18px;padding-right:30px;position:relative;text-align:left !important;transition:all .2s ease-in-out;user-select:none;white-space:nowrap;width:auto}.nice-select:hover{border-color:#dbdbdb}.nice-select:active,.nice-select.open,.nice-select:focus{border-color:#999}.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:"";display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;transform-origin:66% 66%;transform:rotate(45deg);transition:all .15s ease-in-out;width:5px}.nice-select.open:after{transform:rotate(-135deg)}.nice-select.open .nice-select-dropdown{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none}.nice-select.disabled:after{border-color:#ccc}.nice-select.wide{width:100%}.nice-select.wide .nice-select-dropdown{left:0 !important;right:0 !important}.nice-select.right{float:right}.nice-select.right .nice-select-dropdown{left:auto;right:0}.nice-select.small{font-size:12px;height:36px;line-height:34px}.nice-select.small:after{height:4px;width:4px}.nice-select.small .option{line-height:34px;min-height:34px}.nice-select .nice-select-dropdown{margin-top:4px;background-color:#2f2f2f;border-radius:5px;box-shadow:0 0 0 1px rgba(68,68,68,.11);pointer-events:none;position:absolute;top:100%;left:0;transform-origin:50% 0;transform:scale(0.75) translateY(19px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:9;opacity:0}.nice-select .list{border-radius:5px;box-sizing:border-box;overflow:hidden;padding:0;max-height:210px;overflow-y:auto}.nice-select .list:hover .option:not(:hover){background-color:rgba(0,0,0,0) !important}.nice-select .option{cursor:pointer;font-weight:400;line-height:40px;list-style:none;outline:none;padding-left:18px;padding-right:29px;text-align:left;transition:all .2s}.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{background-color:#b2b2b2}.nice-select .option.selected{font-weight:bold}.nice-select .option.disabled{background-color:rgba(0,0,0,0);color:#999;cursor:default}.nice-select .optgroup{font-weight:bold}.no-csspointerevents .nice-select .nice-select-dropdown{display:none}.no-csspointerevents .nice-select.open .nice-select-dropdown{display:block}.nice-select .list::-webkit-scrollbar{width:0}.nice-select .has-multiple{white-space:inherit;height:auto;padding:7px 12px;min-height:36px;line-height:22px}.nice-select .has-multiple span.current{border:1px solid #ccc;background:#eee;padding:0 10px;border-radius:3px;display:inline-block;line-height:24px;font-size:14px;margin-bottom:3px;margin-right:3px}.nice-select .has-multiple .multiple-options{display:block;line-height:24px;padding:0}.nice-select .nice-select-search-box{box-sizing:border-box;width:100%;padding:5px;pointer-events:none;border-radius:5px 5px 0 0}.nice-select .nice-select-search{box-sizing:border-box;background-color:#2f2f2f;border:1px solid #e8e8e8;border-radius:3px;color:#b2b2b2;display:inline-block;vertical-align:middle;padding:7px 12px;margin:0 10px 0 0;width:100%;min-height:36px;line-height:22px;height:auto;outline:0 !important;font-size:14px}

public/css/style.css

@@ -169,3 +169,13 @@ button:hover {
 .custom-select:hover .options {
   display: block;
 }
+
+/* Javascript searchable select used in source/target language */
+.nice-select, .nice-select-dropdown, .nice-select-search {
+  border-right: none;
+  border-bottom: none;
+  border-top: none;
+  border-radius: 4px;
+  border-left: 2px solid #3c67ff;
+  box-shadow: 2px 2px 0px 0px rgba(60, 103, 255, 0.25);
+}

views/header.html

@@ -14,6 +14,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <meta name="referrer" content="no-referrer" />
+	<script src="/js/nice-select2.js"></script>
+	<link rel="stylesheet" href="/css/nice-select2.css">
     <link rel="stylesheet" href="/css/style.css" />
   </head>
 

views/index.html

@@ -19,7 +19,7 @@
 
     <div class="wrap languages">
       <div class="language">
-        <select name="from" aria-label="Source language">
+        <select name="from" aria-label="Source language" id="sourceLanguage">
           {{range $key, $value := .SourceLanguages}} {{if $.From}}
           <option value="{{ .Id }}" {{if eq $.From .Id}}selected{{end}}>
             {{ .Name }}
@@ -44,7 +44,7 @@
       </div>
 
       <div class="language">
-        <select name="to" aria-label="Target language">
+        <select name="to" aria-label="Target language" id="targetLanguage">
           {{range $key, $value := .TargetLanguages}}
           <option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
             {{ .Name }}
@@ -107,6 +107,10 @@
           document.getElementById("translation-form").submit();
         }
       });
+    var options = { searchable: true };
+    NiceSelect.bind(document.getElementById("targetLanguage"), options);
+    var options = { searchable: true };
+    NiceSelect.bind(document.getElementById("sourceLanguage"), options);
   </script>
 </main>
 {{ template "footer" .}}