Add a search box

macrovision.css

@@ -294,6 +294,10 @@ body.show-extra-options .options-block.options-block-optional {
     height: 48pt;
 }
 
+.menubar-group input {
+    font-size: 24pt;
+}
+
 .popout-group {
     margin: 20px;
     display: flex;

macrovision.html

@@ -74,6 +74,9 @@
     </span>
     <span class="menubar-group" id="filters">
       
+    </span>
+    <span class="menubar-group" id="search">
+      <input id="search-box" type="text" placeholder="Search...">
     </span>
     <span class="menubar-group">
       <button id="open-help">

macrovision.js

@@ -3527,8 +3527,17 @@ document.addEventListener("DOMContentLoaded", () => {
 
     updateWorldHeight();
 
+    document.querySelector("#search-box").addEventListener("change", e => doSearch(e.target.value));
+
 });
 
+let searchText = "";
+
+function doSearch(value) {
+    searchText = value;
+    updateFilter();
+}
+
 function customEntityFromFile(file, x=0.5, y=0.5) {
     file.arrayBuffer().then(buf => {
         arr = new Uint8Array(buf);
@@ -3760,7 +3769,7 @@ function prepareEntities() {
         };
 
         select.addEventListener("change", e => {
-            if (select.options[select.selectedIndex].classList.contains("nsfw")) {
+            if (select.options[select.selectedIndex]?.classList.contains("nsfw")) {
                 select.classList.add("nsfw");
             } else {
                 select.classList.remove("nsfw");
@@ -3768,9 +3777,14 @@ function prepareEntities() {
 
             // preload the entity's first image
 
-            const entity = entityList[select.selectedIndex].constructor();
-            let img = new Image();
-            img.src = entity.currentView.image.source;
+            const entity = entityList[select.selectedIndex]?.constructor();
+
+            if (entity)
+            {
+                let img = new Image();
+                img.src = entity.currentView.image.source;
+            }
+            
         })
 
         const button = document.createElement("button");
@@ -3780,6 +3794,9 @@ function prepareEntities() {
         button.innerHTML = "<i class=\"far fa-plus-square\"></i>";
 
         button.addEventListener("click", e => {
+            if (entityList[select.value] == null)
+                return;
+
             const newEntity = entityList[select.value].constructor()
             let yOffset = 0;
 
@@ -3979,25 +3996,35 @@ function updateFilter() {
 
     clearFilter();
 
-    if (!filterKeySelect) {
-        return;
-    }
-
-    const key = filterKeySelect.value;
+    const noFilter = !filterKeySelect;
 
+    let key;
     let current = document.querySelector(".entity-select.category-visible").value;
-    let replace = false;
+
+    if (!noFilter)
+    {
+        key = filterKeySelect.value;
+        current
+    }
+    
+    let replace = current == "";
     let first = null;
 
     let count = 0;
 
+    const lowerSearchText = searchText !== "" ? searchText.toLowerCase() : null;
     document.querySelectorAll(".entity-select.category-visible > option").forEach(element => {
-        let keep = type == "none";
+        let keep = noFilter;
 
-        if (filterDefs[type].extract(availableEntities[category][element.value]).indexOf(key) >= 0) {
+        if (!noFilter && filterDefs[type].extract(availableEntities[category][element.value]).indexOf(key) >= 0) {
             keep = true;
         }
 
+        if (searchText != "" && !availableEntities[category][element.value].name.toLowerCase().includes(lowerSearchText))
+        {
+            keep = false;
+        }
+
         if (!keep) {
             element.classList.add("filtered");
             element.disabled = true;