0
J'ai trouvé une belle liste déroulante filtrable sélectionnable sur Codepen, copié le code, et essayé de le faire fonctionner sur mon ordinateur. Bien que la disposition semble correcte, le filtrage ne fonctionne pas localement.Filtre sélectionnable liste déroulante (HTML, CSS, JS) - Code directement copié à partir de Codepen ne fonctionne pas
Malheureusement, je n'ai absolument aucune idée pourquoi. Toute aide est appréciée.
originale de travail Codepen:
https://codepen.io/marijoha/pen/zKjvEw
Mon (non travail) fichier HTML en ligne en direct:
http://select-dropdown.bitballoon.com/
Téléchargez mon fichier HTML:
https://send.firefox.com/download/bd917213cd/#mwjZbZTfXNNv6I8FTW5TLQ
Mes HTML Code de fichiers:
<!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>
Vérifiez votre console - vous avez 'Impossible de lire la propriété 'shouldStopExecution' d'erreur undefined'. Vous essayez d'accéder à 'window.CP.shouldStopExecution' sans définir préalablement' window.CP'. – fen1x
Vous avez raison, la console affiche une erreur. Comme je suis nouveau sur JavaScript, je ne sais pas trop comment définir '' '' window.CP''' à l'avance. Ecrire simplement '' 'window.CP = undefined;' '' après '' 'var valueSubstring = undefined;' '' semble ne pas fonctionner. Comment puis-je définir '' 'window.CP'''? Et en tant que développeur JS expérimenté, vous pouvez peut-être me dire pourquoi je n'ai pas besoin de définir '' '' window.CP''' sur Codepen. Merci! – dash
parce que CP signifie CodePen ... –