title: How to effectively add a search to a html form?
body: <p>I am making what is essentially a online calculator but I have a large dropdown of options to select from for one of the options. </p>
  
  <p>To make it more user-friendly I wanted to add a simple search (text input) to filter through the options. </p>
  
  <p>So I have (HTML):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="character_select" id="character_select"&gt;
    &lt;option value="Byleth", id="Byleth"&gt;Byleth&lt;/option&gt;
    &lt;option value="Edelgard", id="Edelgard"&gt;Edelgard&lt;/option&gt;
    &lt;option value="Hubert", id="Hubert"&gt;Hubert&lt;/option&gt;
    &lt;option value="Dorothea", id="Dorothea"&gt;Dorothea&lt;/option&gt;
    &lt;option value="Ferdinand", id="Ferdinand"&gt;Ferdinand&lt;/option&gt;
    &lt;option value="Caspar", id="Caspar"&gt;Caspar&lt;/option&gt;
    &lt;option value="Petra", id="Petra"&gt;Petra&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And was thinking I could make a text input at the top and use js to fetch the options and then filter through them with a for loop:</p>
  
  <p>something like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>search = document.getElementById("search");
  filtered_search = search.value.toUpperCase();
  options=getElementsByTagName("option");
   for (i = 0; i &lt; option.length; i++) {
      txtValue = option[i].textContent || option[i].innerText;
      if (txtValue.toUpperCase().indexOf(filtered_search) &gt; -1) {
        option[i].style.display = "";
      } else {
        option[i].style.display = "none";
      }
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is this an acceptable way to perform this? Is there anything better? </p>
  
  <p>In addition, would it be possible to add a second attribute to my dropdown options (like the top 5 have an id of "apples") and then have the search also show those options when "apple" is searched? </p>
  
  <p>I assume I could just add another <code>else if</code> statement to the JS and go from there but was wondering if it might be better to create some form of index system to increase speed if I were to add more searchable attributes to the options?</p>
  
  <p>I'm a bit of a rookie in the JS space and I apologize if the question is too open-ended but I just need some general direction for best practice. </p>