vanillaSelectBox
1.0.0
NPM I Vanillaselectbox
Wenn Sie alle Elemente auswählen, wenn die Liste vom Textfeld gefiltert wird
Die Idee ist, ein alltägliches Auswahlelement zu verwenden, es auszublenden und stattdessen eine schöne Dropdown-Liste zu liefern. Die Daten stammen jedoch aus dem ursprünglichen Element und dieser wird mit Auswahlmöglichkeiten aktualisiert und erhält dennoch ein Änderungsereignis. Eine Ausnahme ist die Remote Init () und die Remote -Search () -Funktionen (optional), die mit V 0,75 hinzugefügt wurden, benötigen jedoch mindestens ein leeres Auswahlelement, und das Ergebnis ist im ursprünglichen Element weiterhin bereitgestellt. Fühlen Sie sich frei, weitere Erklärungen auf der Registerkarte Diskussionen zu fragen. Bis bald
Demo Classic: https://philippemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
Demo Remote: https://philippemarcmeyer.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 () Fehlerkorrektur im Einzelmodus. Sie konnten den Wert nicht festlegen
v1.04: Wählen Sie alle von https://github.com/Arthur911016 behobenen Problemen aus
v1.03: GetResult () Eine neue Folge, um die ausgewählten Werte in einem Array zu erhalten
v1.02: Hinzufügen von 2 neuen Optionen "itemsseseparator", um die Standardeinstellung zu ändern "," Element -Separator in der Schaltfläche und Übersetzungen, um den Element in Singular anzuzeigen, wenn nur einer vorhanden ist.
V1.01: Entfernen der nutzlosen Codezeile 550.551 Ausgabe 71 von CHCHCH
V1.00: Aufgrund der Nachfrage: Fügte eine Paket.json -Datei hinzu und wechselte auf 1.0.0, um sich auf ein Upload auf NPM vorzubereiten
V0.78: Verwenden Sie die Inline -Stile im Hauptknopf. Sie können Nutzung StevIninlinestils stehlen: Richtig, um das Legacy -Verhalten zu verwenden
v0.77: Arbeiten am Platz mit Bastoune Help => scheint den Platzhalterwert bei mehreren Dropdown -Checkall immer noch zu verlieren
v0.76: Möglichkeit, den Dropdown -Baum zu ändern und die Funktion der Remote -Suchfunktion zu ändern + leere () -Funktion
V0.75: Remote -Suche Ready + Lokale Suchänderung: Wenn eine Überprüfung der Optgroup Kinder nur überprüft, wenn sie nicht von der Suche ausgeschlossen sind.
v0.72: Remote -Search (WIP) Bugfix [x] Wählen Sie alle duplizierten aus
v0.71: Remote -Suche (WIP) Besserer Code => Die Funktion "Remote -Suche benutzten" muss ein Versprechen zurückgeben
V0.70: Remote -Suche (WIP) kann getestet werden. Arbeitet nur auf 1 Level -Menüs (keine Optgroups)
V0.65: Zwei Ebenen: Fehlerbehebung: Gruppen werden überprüft/deaktiv
V0.64: Zwei Ebenen: Gruppen sind jetzt überprüft, um die Kinderoptionen zu überprüfen/zu deaktivieren
V0.63: Zwei Ebenen: Ein Klick auf die Gruppe auswählt / versichert Kinder
v0.62: Neue Option: Maxoptionwidth setzen Sie eine maximale Breite für jede Option für enge Menüs (Ellipsis Troncature)
V0.61: Neue Option: MaxSelect, ein Maximum auf die ausgewählbaren Optionen in einem Menü Multiple Choice Legen Sie ein Maximum fest
V0.60: Zwei Ebenen: Optiergruppen werden jetzt verwendet, um zwei Dropdowns auf Level anzuzeigen
V0.59: Fehlerbehebung: Das Suchfeld überlappte das erste Element in Single Selects
v0.58: Fehlerbehebungen
v0.57: Fehlerbehebung (Minwidth -Option nicht geehrt)
v0.56: Die Multiselect -Kontrollkästchen sind etwas kleiner. Die Option Maxwidth funktioniert jetzt + Die Option Minwidth hat jetzt ein Style -Attribut zum Schutz seines Aussehens hinzugefügt
V0.55: Alle Attribute aus den ursprünglichen Auswahloptionen werden in das Element SelectBox kopiert. Ausnahme => "ausgewählt", "deaktiviert", "Datentext", "Datenwert", "Stil"
V0.54: Wenn alle Optionen des SELECT vom Benutzer ausgewählt werden, wird das Kontrollkästchen alle Kontrollkästchen überprüft.
v0.53: Wenn alle Optionen der Auswahl ausgewählt sind, wird das Kontrollkästchen überprüft => Siehe Demo "Wählen Sie alle Tests aus".
v0.52: Bessere Unterstützung des Befehls aus Select ('All') => steht im Einklang mit dem Kontrollkästchen und der Auswahl / Deaktivierung beim Durchsuchen von SELECT / Deaktivieren nur die gefundenen Elemente
v0.51: Übersetzungen für alle auswählen alle + Moll CSS -Korrekturen + Wählen Sie keine deaktivierten Elemente aus
v0.50: PR von https://github.com/jaguerra2017 Hinzufügen einer Select All/Löschen Sie alle Check -Schaltflächen + Optgroup -Unterstützung!
V 0.41: Fehler korrigiert, der Menüinhalt wurde verlegt, wenn eine CSS -Transformation auf ein Elternteil angewendet wurde
v 0.40: A Klicken Sie auf ein SELECTBOX. Schließen Sie die anderen geöffneten Felder
V 0,35: Sie können Elemente aktivieren und deaktivieren. Die bereits Disbles -Optionen des SELECT werden auch zum Zeitpunkt der Init verwendet.
v 0.30: Das Menü bewegt sich nicht mehr in der Fenstergrößenrede und scrollen Sie + Z-Index in der Reihenfolge der Erstellung für mehrere Instanzen
v 0.26: korrigierter Fehler im Stayopen -Modus mit deaktivieren () Funktion
v 0.25: Neue Option Stayopen und die Dropbox ist keine Dropbox, sondern eine schöne Multi-Select
v 0.22: Die Funktion auf VanillaselectBox Prototype => Mehrere Instanzen von Vanillaselectbox (), aber 1 Funktionssatz im Speicher
v 0.21: dh 11 Kompatibilität
v 0.20: Working SelectBox sowohl Einzel- als auch mehrere Auswahlmöglichkeiten mit Suchbox!
V 0.10: Funktionales Plugin für einzelne und mehrere Auswahlmöglichkeiten ohne Suchfeld für den Moment
V 0.02: Ereignis zur Änderung des Dispatchs um das Auswählen von + schönerem Check -Zeichen hinzugefügt
V 0.01: Erstes Commit => Grundlagen für ein einzelnes Select -Box + Das DOM wird gereinigt, wenn Sie zweimal initieren
Single -Auswahlmenü:
<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" }
});
Multiple Menü ausgewählt: Beachten Sie das Attribut "Mehrfach" zum GE EN Multiple -Select -Menü und die Größe = "2", um die vom Komma abgrenzende Zeichenfolge ausgewählter Elemente durch "3 Elemente" zu ersetzen, in denen mehr als Größenelemente ausgewählt werden (hier werden Elemente in Autos übersetzt)
<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" }
});
Zwei Ebenen: Verwenden Sie einfach Optgroup -Tags, um zwei Ebenen zu machen
<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>
MaxSelect Option: Begrenzt die Anzahl der Optionen, die Sie auswählen können
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Option Maxoptionwidth: Begrenzt die Breite der Menüoptionen, um das Menü mit Ellipis enger zu machen
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Remote -Suchbeispiel:
<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();
});
}
