vanillaSelectBox
1.0.0
NPM I VanillasElectBox
Se você selecionar todos os elementos quando a lista for filtrada pela caixa de texto, ela colocará o valor tudo no espaço reservado, mesmo quando ela não tiver todos os valores selecionados, se você fechar e abrir novamente a seleção, notará que nem todos os valores são verificados e o espaço reservado diz que todos
A idéia é usar um elemento de seleção mundano, esconder-o e fornecer uma boa suspensão. Mas os dados vêm do elemento original e este é atualizado com as opções feitas e ainda recebe um evento de alteração. Uma exceção é as funções Remote Init () e Remote Search () (Opcional) adicionadas com V 0,75, mas elas exigem pelo menos um elemento de seleção vazio e o resultado ainda é fornecido no elemento original. Sinta -se à vontade para pedir mais explicações na guia Discussões. Vejo você em breve
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: Correção do bug setValue () no modo único. Você não poderia definir o valor
v1.04: Selecione todos os problemas corrigidos por https://github.com/arthur911016
v1.03: getResult () uma nova fone para obter os valores selecionados em uma matriz
v1.02: Adicionando 2 novas opções "itens Separator" para alterar o padrão "," separador de itens mostrando no botão e traduções.item para mostrar o item no singular, se houver apenas um.
v1.01: Remoção de código inútil 550.551 Edição 71 por chchch
v1.00: Devido à demanda: adicionou um arquivo package.json e mudou para 1.0.0 em preparação para um upload para o NPM
v0.78: Pare de usar estilos embutidos no botão principal. Você pode roubar o uso KeepinLinestyles: Fiel para usar o comportamento legado
v0.77: Trabalhe no local do local com BasToune help => ainda parece perder o valor do espaço reservado em múltiplos suspensões
v0.76: Possibilidade de alterar a árvore suspensa e alterar a função de pesquisa remota + corrigindo a função vazia ()
V0.75: Pesquisa remota Pronto + Modificação de pesquisa local: Quando uma verificação no optgroup verifica as crianças apenas se elas não excluídas da pesquisa.
v0.72: Bugfix de pesquisa remota (WIP) [x] Selecione todos os duplicados
v0.71: Pesquisa remota (WIP) Better Code => A função Deinada de Usuário de Pesquisa Remota deve retornar uma promessa
v0.70: A pesquisa remota (WIP) pode ser testada. Funciona apenas em menus de 1 nível (não os grupos de opt)
v0.65: Dois níveis: Correção de bugs: os grupos são verificados/desmarcados quando verifique tudo/desmarque tudo é clicado
V0.64: Dois níveis: os grupos agora podem verificar/desmarcar as opções de crianças
v0.63: Dois níveis: um clique no grupo Seleciona / Unselecte crianças
v0.62: nova opção: MaxOptionWidth Defina uma largura máxima para cada opção para menus estreitos (elipsis Troncature)
v0.61: nova opção: MaxSelect, defina um máximo para as opções selecionáveis em um menu de múltipla escolha
v0.60: Dois níveis: OptGroups agora são usados para mostrar dois suspensos de nível
v0.59: Correção de bug: a caixa de pesquisa estava sobrepondo o primeiro item em selecionamentos únicos
v0.58: correções de bugs
v0.57: Correção de bug (opção de minwidth não homenageada)
v0.56: As caixas de seleção multisselect são um pouco menores, a opção MaxWidth agora está funcionando + opção de minwidth adicionada também o botão agora tem um atributo de estilo para proteger sua aparência
v0.55: Todos os atributos das opções de seleção originais são copiados para o elemento SelectBox. Exceto => "selecionado", "desativado", "texto de dados", "valor de dados", "estilo"
v0.54: Se todas as opções da seleção forem selecionadas pelo usuário, a caixa de seleção Verifique toda a verificação.
v0.53: Se todas as opções da seleção forem selecionadas, o verificação de toda a caixa de seleção será verificado => Consulte a demonstração "Selecione todos os testes"
v0.52: Melhor suporte para selecionar ('All') => O comando é consistente com a caixa de seleção e selecionando / desmarcando enquanto pesquisa selecionar / desmarcar apenas os itens encontrados
v0.51: traduções para selecionar todos/limpar todas + menores correções CSS + Não selecione itens desativados
v0.50: PR por https://github.com/jaguerra2017 Adicionando um botão de seleção todos/limpe todos os check + optgroup!
v 0.41: Bug corrigido, o conteúdo do menu foi extraviado se uma transformação CSS foi aplicada nos pais
v 0.40: um clique em um selectBox Fechar as outras caixas abertas
v 0.35: você pode ativar e desativar itens. As opções já descritas da seleção também são usadas no horário init.
v 0.30: O menu para de se mover na janela redimensiona e role + index Z em ordem de criação para várias instâncias
v 0.26: bug corrigido no modo stayopen com função desabille ()
v 0.25: nova opção stayopen e o Dropbox não é mais um Dropbox, mas um bom multi-seleto
v 0.22: migrando a função para o protótipo VanillasElectBox => várias instâncias de vanillaselectBox (), mas 1 conjunto de funções na memória
v 0,21: ou seja, 11 compatibilidade
v 0.20: Working SelectBox Ambos de opções únicas e múltiplas, com caixa de pesquisa!
v 0.10: plug -in funcional para seleções únicas e múltiplas, sem caixa de pesquisa no momento
v 0.02: Adicionado evento de alteração de despacho para selecionar + marca de seleção mais agradável
v 0.01: primeiro comprometimento => básico para uma única caixa de seleção + o DOM é limpo se você iniciar duas vezes
Menu de seleção ú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" }
});
Menu de seleção múltipla: observe o atributo "múltiplo" para o menu de seleção múltiplo e o tamanho = "2" para substituir a sequência delimitada de vírgula de itens selecionados por "3 itens" onde mais do que itens de tamanho são selecionados (aqui os itens são traduzidos para carros)
<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" }
});
Dois níveis: basta usar tags optgroup para torná -lo dois níveis
<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>
Opção MaxSelect: limita o número de opções que você pode selecionar
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Opção MaxOptionWidth: limita a largura das opções de menu para tornar o menu mais estreito usando elipis
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Exemplo de pesquisa 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();
});
}
