title: Filterable select dropdown (HTML, CSS, JS) - Code directly copied from Codepen not working
body: <p>I found a nice filterable select dropdown on Codepen, copied the code, and tried to get it working on my computer.</p>
  
  <p>While the layout looks fine, filtering does not work locally.</p>
  
  <p>Unfortunately, I have absolutely no idea why. Any help is appreciated.</p>
  
  <p><strong>Working original Codepen:</strong></p>
  
  <p><a href="https://codepen.io/marijoha/pen/zKjvEw" rel="nofollow noreferrer">https://codepen.io/marijoha/pen/zKjvEw</a></p>
  
  <p><strong>My (non working) HTML file live online:</strong></p>
  
  <p><a href="http://select-dropdown.bitballoon.com/" rel="nofollow noreferrer">http://select-dropdown.bitballoon.com/</a></p>
  
  <p><strong>Download my HTML file:</strong></p>
  
  <p><a href="https://send.firefox.com/download/bd917213cd/#mwjZbZTfXNNv6I8FTW5TLQ" rel="nofollow noreferrer">https://send.firefox.com/download/bd917213cd/#mwjZbZTfXNNv6I8FTW5TLQ</a></p>
  
  <p><strong>My HTML files's code:</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;style&gt;
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
        height: 100vh;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        font-family: 'Ek Mukta';
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 4px;
        background: #1D1F20;
      }
  
      h1 {
        margin-top: 10vh;
        font-size: 2.5rem;
        max-width: 500px;
        letter-spacing: 3px;
        text-align: center;
        line-height: 1.5;
        font-family: 'Open Sans';
        text-transform: capitalize;
        font-weight: 800;
        color: white;
      }
      h1 span {
        color: #FF908B;
      }
  
      form {
        position: relative;
        width: 18rem;
        margin-top: 8vh;
      }
  
      .chosen-value,
      .value-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
  
      .chosen-value {
        font-family: 'Ek Mukta';
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 4px;
        height: 4rem;
        font-size: 1.1rem;
        padding: 1rem;
        background-color: #FAFCFD;
        border: 3px solid transparent;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
      }
      .chosen-value::-webkit-input-placeholder {
        color: #333;
      }
      .chosen-value:hover {
        background-color: #FF908B;
        cursor: pointer;
      }
      .chosen-value:hover::-webkit-input-placeholder {
        color: #333;
      }
      .chosen-value:focus, .chosen-value.open {
        box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
        outline: 0;
        background-color: #FF908B;
        color: #000;
      }
      .chosen-value:focus::-webkit-input-placeholder, .chosen-value.open::-webkit-input-placeholder {
        color: #000;
      }
  
      .value-list {
        list-style: none;
        margin-top: 4rem;
        box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        max-height: 0;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
      }
      .value-list.open {
        max-height: 320px;
        overflow: auto;
      }
      .value-list li {
        position: relative;
        height: 4rem;
        background-color: #FAFCFD;
        padding: 1rem;
        font-size: 1.1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        cursor: pointer;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        opacity: 1;
      }
      .value-list li:hover {
        background-color: #FF908B;
      }
      .value-list li.closed {
        max-height: 0;
        overflow: hidden;
        padding: 0;
        opacity: 0;
      }
      &lt;/style&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600|Open+Sans:400,800" rel="stylesheet"&gt;
  
  
      &lt;h1&gt;&lt;span&gt;Styled&lt;/span&gt; and &lt;span&gt;filterable&lt;/span&gt; select dropdown&lt;/h1&gt;
      &lt;form&gt;
        &lt;input class="chosen-value" type="text" value="" placeholder="Type to filter"&gt;
        &lt;ul class="value-list"&gt;
          &lt;li&gt;Alabama&lt;/li&gt;
          &lt;li&gt;Alaska&lt;/li&gt;
          &lt;li&gt;Arizona&lt;/li&gt;
          &lt;li&gt;Arkansas&lt;/li&gt;
          &lt;li&gt;California&lt;/li&gt;
          &lt;li&gt;Colorado&lt;/li&gt;
          &lt;li&gt;Connecticut&lt;/li&gt;
          &lt;li&gt;Delaware&lt;/li&gt;
          &lt;li&gt;Florida&lt;/li&gt;
          &lt;li&gt;Georgia&lt;/li&gt;
          &lt;li&gt;Hawaii&lt;/li&gt;
          &lt;li&gt;Idaho&lt;/li&gt;
          &lt;li&gt;Illinois&lt;/li&gt;
          &lt;li&gt;Indiana&lt;/li&gt;
          &lt;li&gt;Iowa&lt;/li&gt;
          &lt;li&gt;Kansas&lt;/li&gt;
          &lt;li&gt;Kentucky&lt;/li&gt;
          &lt;li&gt;Louisiana&lt;/li&gt;
          &lt;li&gt;Maine&lt;/li&gt;
          &lt;li&gt;Maryland&lt;/li&gt;
          &lt;li&gt;Massachusetts&lt;/li&gt;
          &lt;li&gt;Michigan&lt;/li&gt;
          &lt;li&gt;Minnesota&lt;/li&gt;
          &lt;li&gt;Mississippi&lt;/li&gt;
          &lt;li&gt;Missouri&lt;/li&gt;
          &lt;li&gt;Montana&lt;/li&gt;
          &lt;li&gt;Nebraska&lt;/li&gt;
          &lt;li&gt;Nevada&lt;/li&gt;
          &lt;li&gt;New Hampshire&lt;/li&gt;
          &lt;li&gt;New Jersey&lt;/li&gt;
          &lt;li&gt;New Mexico&lt;/li&gt;
          &lt;li&gt;New York&lt;/li&gt;
          &lt;li&gt;North Carolina&lt;/li&gt;
          &lt;li&gt;North Dakota&lt;/li&gt;
          &lt;li&gt;Ohio&lt;/li&gt;
          &lt;li&gt;Oklahoma&lt;/li&gt;
          &lt;li&gt;Oregon&lt;/li&gt;
          &lt;li&gt;Pennsylvania&lt;/li&gt;
          &lt;li&gt;Rhode Island&lt;/li&gt;
          &lt;li&gt;South Carolina&lt;/li&gt;
          &lt;li&gt;South Dakota&lt;/li&gt;
          &lt;li&gt;Tennessee&lt;/li&gt;
          &lt;li&gt;Texas&lt;/li&gt;
          &lt;li&gt;Utah&lt;/li&gt;
          &lt;li&gt;Vermont&lt;/li&gt;
          &lt;li&gt;Virginia&lt;/li&gt;
          &lt;li&gt;Washington&lt;/li&gt;
          &lt;li&gt;West Virginia&lt;/li&gt;
          &lt;li&gt;Wisconsin&lt;/li&gt;
          &lt;li&gt;Wyoming&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/form&gt;
  
  
  
      &lt;script&gt;
      'use strict';
  
      var inputField = document.querySelector('.chosen-value');
      var dropdown = document.querySelector('.value-list');
      var dropdownArray = [].concat(document.querySelectorAll('li'));
      var dropdownItems = dropdownArray[0];
      dropdown.classList.add('open');
      inputField.focus(); // Demo purposes only
  
      var valueArray = [];
      dropdownItems.forEach(function (item) {
        valueArray.push(item.textContent);
      });
  
      var closeDropdown = function closeDropdown() {
        dropdown.classList.remove('open');
      };
  
      inputField.addEventListener('input', function () {
        dropdown.classList.add('open');
        var inputValue = inputField.value.toLowerCase();
        var valueSubstring = undefined;
        if (inputValue.length &gt; 0) {
          for (var j = 0; j &lt; valueArray.length; j++) {if (window.CP.shouldStopExecution(1)){break;}
            if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
              dropdownItems[j].classList.add('closed');
            } else {
              dropdownItems[j].classList.remove('closed');
            }
          }
      window.CP.exitedLoop(1);
  
        } else {
          for (var i = 0; i &lt; dropdownItems.length; i++) {if (window.CP.shouldStopExecution(2)){break;}
            dropdownItems[i].classList.remove('closed');
          }
      window.CP.exitedLoop(2);
  
        }
      });
  
      dropdownItems.forEach(function (item) {
        item.addEventListener('click', function (evt) {
          inputField.value = item.textContent;
          dropdownItems.forEach(function (dropdown) {
            dropdown.classList.add('closed');
          });
        });
      });
  
      inputField.addEventListener('focus', function () {
        inputField.placeholder = 'Type to filter';
        dropdown.classList.add('open');
        dropdownItems.forEach(function (dropdown) {
          dropdown.classList.remove('closed');
        });
      });
  
      inputField.addEventListener('blur', function () {
        inputField.placeholder = 'Select state';
        dropdown.classList.remove('open');
      });
  
      document.addEventListener('click', function (evt) {
        var isDropdown = dropdown.contains(evt.target);
        var isInput = inputField.contains(evt.target);
        if (!isDropdown &amp;&amp; !isInput) {
          dropdown.classList.remove('open');
        }
      });
  
      &lt;/script&gt;
  
      &lt;/html&gt;
  </code></pre>