vanillaSelectBox
1.0.0
npm i vanillaselectbox
Si vous sélectionnez tous les éléments lorsque la liste est filtrée par la zone de texte, il mettra la valeur tout à l'espace réservé même s'il n'a pas toutes les valeurs sélectionnées, si vous fermez et ouvrez à nouveau le sélection, vous remarquerez que toutes les valeurs ne sont pas vérifiées et que l'espace réservé dit tout
L'idée est d'utiliser un élément de sélection banal, de le masquer et de fournir une belle déroute à la place. Mais les données proviennent de l'élément d'origine et celui-ci est mis à jour avec des choix faits et reçoit toujours un événement de changement. Une exception est la télécommande init () et les fonctions de recherche à distance () (facultative) ajoutées avec V 0,75 mais elles nécessitent au moins un élément de sélection vide et le résultat est toujours fourni dans l'élément d'origine. N'hésitez pas à demander plus d'explications dans l'onglet Discussions. À bientôt
Demo Classic: https://philipmemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
Demo Remote: https://philipmemarcmeyer.github.io/vanillaselectbox/ajaxdemo.html?v=1.05
let selectBox = new vanillaSelectBox("#brands",{"maxHeight":200,search:true});
<select id="brands" multiple size="3">
selectBox = new vanillaSelectBox("#brandsOne", { "maxHeight": 200, "search": true, "placeHolder": "Choose a brand..." });
selectBox.disableItems(['Lamborghini','Land Rover']);
v1.05: setValue () Correction de bogue en mode unique. Vous ne pouviez pas définir la valeur
v1.04: sélectionnez tous les problèmes résolus par https://github.com/arthur911016
v1.03: getResult () Une nouvelle fonction pour obtenir les valeurs sélectionnées dans un tableau
v1.02: ajout de 2 nouvelles options "itemsSeparator" pour modifier la valeur par défaut "," séparateur d'élément affichant dans le bouton et les traductions.item pour afficher l'élément en singulier s'il n'y en a qu'un.
V1.01: Suppression de la ligne de code inutile 550 551 Numéro 71 par Chchch
v1.00: en raison de la demande: ajout d'un fichier package.json et est passé à 1.0.0 en préparation à un téléchargement vers NPM
V0.78: Arrêtez d'utiliser les styles en ligne dans le bouton principal. Vous pouvez voler Utiliser Keepinnestyles: True pour utiliser le comportement hérité
V0.77: Travaillez sur le porte-lieux avec une aide Bastoune => semble toujours perdre la valeur d'espace réservé sur plusieurs chèques déroulants
V0.76: Possibilité de modifier l'arborescence déroulante et de modifier la fonction de recherche à distance + Correction vide ()
V0.75: Recherche à distance Ready + Modification de recherche locale: Lorsqu'un chèque sur OptGroup ne vérifie les enfants que s'ils n'ont pas exclu de la recherche.
V0.72: recherche à distance (WIP) BugFix [x] Sélectionnez tous les dupliqués
V0.71: recherche à distance (WIP) Meilleur code => La fonction de recherche de recherche distante doit renvoyer une promesse
V0.70: la recherche à distance (WIP) peut être testée. Fonctionne uniquement sur les menus de niveau 1 (pas OptGroups)
V0.65: Deux niveaux: correction de bogue: les groupes sont vérifiés / non contrôlés lorsque vous vérifiez tout / décochez tout est cliqué
V0.64: Deux niveaux: les groupes sont désormais vérifiables pour vérifier / décocher les options des enfants
V0.63: Deux niveaux: un clic sur le groupe sélectionne / déclenche les enfants
V0.62: Nouvelle option: MaxOptionWidth définissez une largeur maximale pour chaque option pour les menus étroits (troncature ellipsive)
V0.61: Nouvelle option: MaxSelect, définissez un maximum sur les options sélectionnables dans un menu à choix multiple
V0.60: deux niveaux: les optgroups sont maintenant utilisés pour afficher deux listes déroulantes de niveau
V0.59: correction de bogue: la boîte de recherche se chevauchait le premier élément dans des sélections simples
V0.58: correction de bogues
V0.57: correction de bogue (option minwidth non honorée)
V0.56: Les cases à cocher multiseLECT sont un peu plus petites, l'option maxwidth fonctionne maintenant + l'option de minwidth ajoutée ainsi que le bouton a maintenant un attribut de style pour protéger son apparence
V0.55: Tous les attributs des options de sélection d'origine sont copiés dans l'élément SelectBox. Expressé => "Sélectionné", "Désvable", "Data-Text", "Data-Value", "Style"
V0.54: Si toutes les options du SELECT sont sélectionnées par l'utilisateur, la case à cocher est coché.
V0.53: Si toutes les options du SELECT sont sélectionnées, la case à cocher est cochée => Voir démo "Sélectionnez tous les tests"
V0.52: Meilleur prise en charge de Select ('all') => La commande est cohérente avec la case et la sélection / désélection
V0.51: Traductions pour sélectionner ALL / Effacer All + Corrections CSS mineures + ne sélectionnez pas les éléments désactivés
V0.50: PR par https://github.com/jaguererra2017 Ajouter un bouton Sélectionner ALL / Effacer tout le bouton Vérifier + OptGroup Prise en charge!
V 0,41: Bogue corrigée, le contenu du menu a été déplacé si une transformée CSS était appliquée sur un parent
V 0.40: un cliquez sur un SelectBox fermez les autres boîtes ouvertes
V 0,35: Vous pouvez activer et désactiver les articles. Les options déjà désinvoltes du Select sont également utilisées à l'heure d'initiale.
V 0,30: Le menu cesse de se déplacer sur la fenêtre Resize et faire défiler + index z dans l'ordre de la création pour plusieurs instances
V 0,26: Bogue corrigée en mode séjour avec la fonction Disable ()
V 0,25: Nouvelle option Stayopen, et la Dropbox n'est plus une Dropbox mais une belle multi-sélection
V 0,22: migration de la fonction vers le prototype de vanillaselectbox => plusieurs instances de vanillaselectbox () mais 1 ensemble de fonctions en mémoire
V 0,21: COMPATIBILITÉ IE 11
V 0.20: Fonctionnement SelectBox à la fois des choix uniques et multiples, avec une boîte de recherche!
V 0.10: plugin fonctionnel pour les sélections simples et multiples, sans case de recherche pour le moment
V 0,02: Ajout de l'événement de modification de répartition pour sélectionner + plus beau chèque
v 0,01: premier engagement => bases pour une seule boîte de sélection + le DOM est nettoyé si vous inutiez deux fois
Menu de sélection unique:
<select id="singleTest">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#singleTest",
{
"placeHolder":"Choose your car",
translations: { "all": "All", "items": "Cars" }
});
Menu de sélection multiple: REMARQUE L'attribut "multiple" au menu Sélectionnez GE en plusieurs et le Menu Size = "2" pour remplacer la chaîne délimitée par virgule d'éléments sélectionnés par "3 éléments" où plus que les éléments de taille sont sélectionnés (les éléments ici sont traduits en voitures)
<select id="multiTest" multiple size="2">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#multiTest",
{
"placeHolder":"Choose up to 3 cars",
"maxSelect":3,
"translations": { "all": "All", "items": "Cars" }
});
Deux niveaux: utilisez simplement des balises OptGroup pour en faire deux niveaux
<div>
<label for="dino-select">Choose dinosaurs :</label>
<select id="dino-select" multiple size="3" >
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
</div>
<script>
// How to get the result from the original select tag :
let chosenDinos = [];
function getValues(id) {
let result = [];
let collection = document.querySelectorAll("#" + id + " option");
collection.forEach(function (x) {
if (x.selected) {
result.push(x.value);
}
});
return result;
}
let selectDinos = new vanillaSelectBox("#dino-select",
{"maxHeight": 300,
"search": true,
translations: { "all": "All", "items": "Dinos" }
});
document.getElementById("dino-select").addEventListener("change", function (e) {
chosenDinos = getValues("dino-select");
console.log(chosenDinos);
});
</script>
Option MaxSelect: limite le nombre d'options que vous pouvez sélectionner
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Option maxoptionwidth: limite la largeur des options de menu pour rendre le menu plus étroit à l'aide d'Ellipis
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Exemple de recherche à distance:
<select id="demoM1" multiple="true" size="3">
</select>
let selectDemoM1 = new vanillaSelectBox("#demoM1",
{
"maxHeight": 300,
"search": true,
"placeHolder" : "search to load more data",
"translations": { "all": "everybody", "items": "people" },
"remote": {
"onSearch": doSearch, // used fro search and init
"onInitSize": 10, // if > 0 onSearch is used for init to populate le select element with the {onInitSize} first elements
}
}
);
function doSearch(what, datasize) {
let valueProperty = "id";
let textProperty = "name";
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET','./data.json', true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var data = JSON.parse(xhr.response);
if (what == "" && datasize != undefined && datasize > 0) { // for init to show some data
data = data.slice(0, datasize);
data = data.map(function (x) {
return {
value: x[valueProperty],
text: x[textProperty]
}
});
} else {
data = data.filter(function (x) {
let name = x[textProperty].toLowerCase();
if (name.indexOf(what.toLowerCase()) != -1)
return {
value: x[valueProperty],
text: x[textProperty]
}
});
}
resolve(data);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
