Je voudrais savoir comment ajouter une zone de texte d'entrée à la liste déroulante de sélection et l'utiliser comme filtre de recherche en javascript.
<select class="form-control">
<option value="trans">Trans</option>
<option value="fund">Fund</option>
<option value="insta">Insta</option>
</select>
4 Réponses :
L'élément HTML
contient un ensemble d'éléments qui représentent les valeurs disponibles pour d'autres contrôles.
<input list="select" name="select"> <datalist class="form-control" id="select"> <option value="Trans"/> <option value="Fund"/> <option value="Insta"/> </datalist>
C'est bien, est-il possible de restreindre l'entrée aux seuls éléments de la liste?
@LazZiya, l'entrée est déjà liée aux éléments de la liste en liant l'attribut id et list :)
mais l'entrée peut néanmoins accepter quelque chose d'autre non défini dans le datalist. droite?
@LazZiya, maintenant j'ai ce que vous voulez dire, pour cela nous devons écrire du code supplémentaire sur l'événement input du contrôle :)
ça ne fonctionne pas sur le clavier tactile, pourquoi? dois-je envoyer un déclencheur de touche?
Voici un exemple des écoles w3 :
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
merci mais j'ai édité le code selon les besoins, je dois ajouter une entrée de texte à l'intérieur de la sélection, veuillez consulter le code
J'ai examiné votre modification, cela casse le code et n'a pas fonctionné, cela ne semble pas être un moyen pratique de gérer l'entrée sélectionnée dans ce cas
Voici une solution simple utilisant select2
Même les éléments sont filtrés
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
C'est un plugin de jquery, vous devez donc lier cette URL également
HTML:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
 document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
 filter =input.value.toUpperCase();
 div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if(txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
   } else {
      a[i].style.display = "none";
   }
 }
}
CSS:
/* Dropdown Button */
.dropbtn {
 background-color: #4CAF50;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* The search field */
#myInput {
 border-box: box-sizing;
 background-image:url('searchicon.png');
 background-position: 14px 12px;
 background-repeat: no-repeat;
 font-size: 16px;
 padding: 14px 20px 12px 45px;
 border: none;
 border-bottom: 1px solid #ddd;
}
/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
 color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
JS:
<div class="dropdown">   <button onclick="myFunction()"class="dropbtn">Dropdown</button>   <div id="myDropdown"class="dropdown-content">     <input type="text"placeholder="Search.." id="myInput"onkeyup="filterFunction()">     <a href="#about">About</a>     <a href="#base">Base</a>     <a href="#blog">Blog</a>     <a href="#contact">Contact</a>     <a href="#custom">Custom</a>     <a href="#support">Support</a>     <a href="#tools">Tools</a>   </div> </div>
Pour plus d'informations, jetez un œil à ceci: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp
merci, mais j'ai modifié le code conformément aux exigences dans Laz Ziya post , je dois ajouter une entrée de texte à l'intérieur de la sélection, veuillez consulter le code
Essayez d'utiliser select2
@ JIJOMONK.A merci pour la réponse, peut utiliser javascript pas jquery