我在 Codepen 上找到了一个很好的可过滤选择下拉菜单，复制了代码，并尝试让它在我的电脑上运行。
虽然布局看起来不错，但过滤在本地不起作用。
不幸的是，我完全不知道为什么。感谢您的帮助。
使用原始 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>
最佳答案
只需删除所有 if (window.CP.shouldStopExecution(*some number*)){break;} 和
window.CP.exitedLoop(*some number*); 解决了您的问题。
window.CP 是 CodePen 用来退出无限循环的东西。 Codepen 有一篇关于此功能的帖子，解释如下:
"The logic to detect a hanging for loop is simple. Possibly too simple. That number passed to the
shouldStopExecutionfunction is the loop identifier.
shouldStopExecutionkeeps track of when a function was first called. If the same loop is called for more than 75ms we break out of the loop."
关于javascript - 可过滤的选择下拉列表(HTML、CSS、JS)——直接从 Codepen 复制的代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45875885/