vanillaSelectBox
1.0.0
NPM I Vanillaselectbox
Si selecciona todos los elementos cuando el cuadro de texto filtra la lista, pondrá todo el valor al marcador de posición incluso cuando no tiene todos los valores seleccionados, si cierre y abre nuevamente la selección, notará que no todos los valores se verifican y el marcador de posición dice todos
La idea es usar un elemento de selección mundano, ocultarlo y proporcionar un buen desplegable. Pero los datos provienen del elemento original y este se actualiza con las opciones realizadas y aún recibe un evento de cambio. Una excepción es el Remote Init () y las funciones remotas de búsqueda () (opcional) agregadas con V 0.75, pero requieren al menos un elemento de selección vacío y el resultado todavía se proporciona en el elemento original. No dude en pedir más explicaciones en la pestaña Discusiones. Nos vemos pronto
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 () Corrección de errores en modo único. No pudiste establecer el valor
V1.04: Seleccione todo el problema solucionado por https://github.com/arthur911016
v1.03: getResult () una nueva fondación para obtener los valores seleccionados en una matriz
V1.02: Agregar 2 nuevas opciones "Elementos Separator" para cambiar el separador predeterminado "," Separador de elementos que se muestra en el botón y las traducciones. Es mostrar el elemento en Singular si solo hay uno.
V1.01: Eliminar la línea de código inútil 550,551 Problema 71 por Chchch
V1.00: Debido a la demanda: se agregó un archivo Packle.json y cambió a 1.0.0 en preparación para una carga a NPM
V0.78: Deje de usar estilos en línea en el botón principal. Puede robar Usar KeepInlinestyles: fiel para usar el comportamiento heredado
V0.77: Trabajar en el titular del lugar con Bastoune Ayuda => Todavía parece perder el valor del marcador de posición en múltiples checkall desplegable
V0.76: posibilidad de cambiar el árbol desplegable y cambiar la función de búsqueda remota + corrección de la función vacía ()
V0.75: Búsqueda remota Ready + Modificación de búsqueda local: cuando un cheque en Optroup verifica a los niños solo si no se excluyen de la búsqueda.
V0.72: Bugfix de búsqueda remota (WIP) [x] Seleccione todos los duplicados
V0.71: Búsqueda remota (WIP) Better Code => La función DESDEINE DEL USUARIO REMOTO DE SIGUNDA debe devolver una promesa
V0.70: Se puede probar la búsqueda remota (WIP). Funciona solo en menús de 1 nivel (no de los grupos opt)
V0.65: Dos niveles: corrección de errores: los grupos se marcan/no se marcan cuando se comprueba todo/desmarque todo se hace clic en
V0.64: Dos niveles: los grupos ahora se pueden verificar para verificar/desmarcar las opciones de los niños
V0.63: Dos niveles: Un clic en el grupo selecciona / deselecciona niños
V0.62: Nuevo opción: MaxOptionWidth Establece un ancho máximo para cada opción para menús estrechos (troncatura de ellipsis)
V0.61: nueva opción: MaxSelect, establezca un máximo en las opciones seleccionables en un menú de opción múltiple
V0.60: Dos niveles: los grupos opt ahora se usan para mostrar dos desplegables de nivel
V0.59: corrección de errores: el cuadro de búsqueda se superponía al primer elemento en seleccionados individuales
V0.58: correcciones de errores
V0.57: corrección de errores (opción MinWidth no honra)
V0.56: Las casillas de verificación multiselectas son un poco más pequeñas, la opción de MaxWidth ahora está funcionando + Minwidth agregado y también el botón tiene un atributo de estilo para proteger su apariencia
V0.55: Todos los atributos de las opciones de selección originales se copian al elemento Selectbox. Excepto => "seleccionado", "deshabilitado", "texto de datos", "valor de datos", "estilo"
V0.54: si el usuario selecciona todas las opciones de Select, entonces se verifica la casilla de verificación de verificación.
V0.53: Si se seleccionan todas las opciones de la selección, entonces la casilla de verificación de verificación está marcada => Consulte la demostración "Seleccione todas las pruebas"
V0.52: Mejor soporte del comando select ('all') => es consistente con la casilla de verificación y seleccionar / deseleccionar mientras busca seleccionar / desmarcar solo los elementos encontrados
V0.51: Traducciones para seleccionar todo/borrar todas las correcciones CSS menores + no seleccionar elementos deshabilitados
V0.50: PR por https://github.com/jaguerra2017 Agregar un botón Seleccionar todo/BORRAR ALL CHECK + OPTGROUP SOPORT!
V 0.41: Corregido el error, el contenido del menú estaba fuera de lugar si se aplicaba una transformación CSS en un padre
V 0.40: un clic en uno selectbox Cierre los otros cuadros abiertos
V 0.35: puede habilitar y deshabilitar los elementos. Las opciones de discle de la selección también se usan en el momento inicial.
V 0.30: El menú deja de moverse en el cambio de tamaño de la ventana y desplazarse + índice Z en orden de creación para múltiples instancias
V 0.26: Error corregido en el modo StayOpen con la función Disable ()
V 0.25: nueva opción StayPen, y el Dropbox ya no es un Dropbox sino un buen selecto múltiple
v 0.22: migrar la función a vanillaselectbox prototype => varias instancias de vanillaselectbox () pero 1 conjunto de funciones en la memoria
V 0.21: es decir, 11 compatibilidad
V 0.20: ¡Funcionando Selectbox tanto opciones individuales como múltiples, con Search-Box!
V 0.10: complemento funcional para selects individuales y múltiples, sin cuadro de búsqueda para el momento
V 0.02: Evento de cambio de envío adicional para seleccionar + más agradable Marca de verificación
V 0.01: First Commit => Conceptos básicos para un solo cuadro de selección + El DOM se limpia si inicia dos veces
Menú de selección única:
<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" }
});
Menú de selección múltiple: Tenga en cuenta el atributo "múltiple" al menú de selección múltiple de GE EN y el size = "2" para reemplazar la cadena delimitada de comas de los elementos seleccionados por "3 elementos" donde se seleccionan los elementos más que el tamaño (aquí los elementos se traducen a los automóviles)
<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" }
});
Dos niveles: solo use etiquetas Optroup para hacerlo dos niveles
<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>
Opción MaxSelect: limita el número de opciones que puede seleccionar
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
MAXOPTIONS OPCIÓN: Limita el ancho de las opciones de menú para hacer que el menú sea más estrecho usando Ellipis
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Ejemplo de búsqueda remota:
<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();
});
}
