Search Enhancement for Excluded Species List

Added basic functionality for the user to fileter/search for specie labels when looking for species to exclude. When a result is found, that option is selected and scrolled into view for the user to see.

scripts/exclude_list.php

@@ -6,6 +6,7 @@
 <div class="customlabels column1">
 <form action="" method="GET" id="add">
   <h3>All Species Labels</h3>
+  <input autocomplete="off" size="18" type="text" placeholder="Search Species..." id="exclude_species_searchterm" name="exclude_species_searchterm">
   <select name="species[]" id="species" multiple size="auto">
   <option>Choose a species below to add to the Excluded Species List</option>
   <?php
@@ -53,5 +54,73 @@
 </div>
 </div>
 
+<script>
+    var search_term = document.querySelector("input#exclude_species_searchterm");
+    search_term.addEventListener("keydown", doSearch);
+    //Index where we found a match
+    var search_match_idx = 1;
+    var last_search_term = "";
+
+    function doSearch(eventObj) {
+        //Don't do anything if the user is till composing
+        if (eventObj.isComposing || eventObj.keyCode === 229) {
+            return;
+        }
+
+        //If the key pressed is the enter key capture it, stop the form submitting and do the search
+        if (eventObj.key === 'Enter' || eventObj.keyCode === 13) {
+            eventObj.preventDefault();
+
+            //User wants to submit the text as a search
+            var search_text = search_term.value.toLowerCase();
+
+            //Now look at the select list, loop over the options and try find part of the text in the option's name/text
+            var species_select_list = document.querySelector('select#species');
+
+            //if the search text differs from last time start the search from the begining of te list
+            if (search_text !== last_search_term) {
+                //Also unselect the last match
+                species_select_list[search_match_idx].removeAttribute('selected');
+                search_match_idx = 1;
+            }
+
+            //Start the loop at 1 so we skip the very initial value asking the user to select a option
+            for (let i = search_match_idx; i < species_select_list.length; i++) {
+                // if (species_select_list[i] !== 'undefined') {
+                option_text = species_select_list[i].value;
+                search_match_text = option_text.toLowerCase().includes(search_text)
+
+                //Check if the item is already selected, that could mean that user may be searching the same phrase
+                //again, we want to search further so let's unselect it and move to the next index
+                if (species_select_list[search_match_idx].getAttribute('selected') === true || species_select_list[search_match_idx].getAttribute('selected') === "true") {
+                    species_select_list[search_match_idx].removeAttribute('selected');
+                    //Go to the next item
+                    i++
+                    continue;
+                }
+
+                //There was a match,
+                if (search_match_text === true) {
+                    //already on this item so skip it and continue with list
+                    if (search_match_idx === i) {
+                        i++
+                        continue;
+                    }
+                    //Finally we havent found this item before
+                    search_match_idx = i;
+
+                    //Scroll into view and select it
+                    species_select_list[search_match_idx].scrollIntoView();
+                    species_select_list[search_match_idx].setAttribute('selected', true);
+                    //break the loop
+                    break;
+                }
+                // }
+            }
+            //Track what search term was used so we know when to start over
+            last_search_term = search_text
+        }
+    }
+</script>
 
 </body>