可过滤的 select 下拉列表（HTML、CSS、JS）- 直接从 Codepen 复制的代码不起作用

Question

我在 Codepen 上找到了一个很好的可过滤 select 下拉菜单，复制了代码，并尝试让它在我的电脑上运行。

虽然布局看起来不错，但本地过滤不起作用。

不幸的是，我完全不知道为什么。感谢任何帮助。

正在使用的原始 Codepen：

https://codepen.io/marijoha/pen/zKjvEw

我的（非工作）HTML 在线实时文件：

http://select-dropdown.bitballoon.com/

下载我的 HTML 文件：

https://send.firefox.com/download/bd917213cd/#mwjZbZTfXNNv6I8FTW5TLQ

我的 HTML 文件的代码：

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
      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;
    }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600|Open+Sans:400,800" rel="stylesheet">


    <h1><span>Styled</span> and <span>filterable</span> select dropdown</h1>
    <form>
      <input class="chosen-value" type="text" value="" placeholder="Type to filter">
      <ul class="value-list">
        <li>Alabama</li>
        <li>Alaska</li>
        <li>Arizona</li>
        <li>Arkansas</li>
        <li>California</li>
        <li>Colorado</li>
        <li>Connecticut</li>
        <li>Delaware</li>
        <li>Florida</li>
        <li>Georgia</li>
        <li>Hawaii</li>
        <li>Idaho</li>
        <li>Illinois</li>
        <li>Indiana</li>
        <li>Iowa</li>
        <li>Kansas</li>
        <li>Kentucky</li>
        <li>Louisiana</li>
        <li>Maine</li>
        <li>Maryland</li>
        <li>Massachusetts</li>
        <li>Michigan</li>
        <li>Minnesota</li>
        <li>Mississippi</li>
        <li>Missouri</li>
        <li>Montana</li>
        <li>Nebraska</li>
        <li>Nevada</li>
        <li>New Hampshire</li>
        <li>New Jersey</li>
        <li>New Mexico</li>
        <li>New York</li>
        <li>North Carolina</li>
        <li>North Dakota</li>
        <li>Ohio</li>
        <li>Oklahoma</li>
        <li>Oregon</li>
        <li>Pennsylvania</li>
        <li>Rhode Island</li>
        <li>South Carolina</li>
        <li>South Dakota</li>
        <li>Tennessee</li>
        <li>Texas</li>
        <li>Utah</li>
        <li>Vermont</li>
        <li>Virginia</li>
        <li>Washington</li>
        <li>West Virginia</li>
        <li>Wisconsin</li>
        <li>Wyoming</li>
      </ul>
    </form>



    <script>
    '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 > 0) {
        for (var j = 0; j < 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 < 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 && !isInput) {
        dropdown.classList.remove('open');
      }
    });

    </script>

    </html>

Answer 1

只需删除所有 if (window.CP.shouldStopExecution(*some number*)){break;} 和 window.CP.exitedLoop(*some number*); 解决了您的问题。

window.CP 是 CodePen 用来退出无限循环的东西。 Codepen 对此有一个 post 解释函数如下：

"The logic to detect a hanging for loop is simple. Possibly too simple. That number passed to the shouldStopExecution function is the loop identifier.

shouldStopExecution keeps track of when a function was first called. If the same loop is called for more than 75ms we break out of the loop."

来源：codepen.io/quezo/post/stopping-infinite-loops

可过滤的 select 下拉列表（HTML、CSS、JS）- 直接从 Codepen 复制的代码不起作用

Filterable select dropdown (HTML, CSS, JS) - Code directly copied from Codepen not working

html

javascript

css

drop-down-menu

codepen