arbtrom v1.0.2

ARBTROM.js

A biblioteca mais minimalista, simples e leve para substiruir os elementos <select> clássicos por novos e performáticos <selects> com barra de pesquisa.

Instalação

Opção 1 (CDN): <script src="https://unpkg.com/arbtrom@1.0.2/dist/arbtrom.js"></script>

Ou substitua @1.0.2 pela versão que desejar.

Opção 2 (npm): npm install arbtrom

Arbtrom no NPM: Arbtrom.js

Como usar

Para aplicar a biblioteca em um elemento <select>, basta selecionar o elemento através da sua propriedade ID e aplicar a função arbtrom(). Exemplo:

window.onload = function(){
	document.getElementById('mySelect').arbtrom();
}

Atenção

A biblioteca não foi desenvolvida para funcionar em conjunto com jQuery, portanto a seleção do elemento alvo deve ser feita em JavaScript puro ou vanilla.js.

Opções

Arbtrom.js oferece algumas opções para personalizar seus <select>:

• noResults - - tipo: string - ação: define o texto que será exibido caso o texto digitado pelo usuário não retorne resultados - padrão: No results found - exemplo: 'Nenhum resultado encontrado'

• placeholder - - tipo: string - ação: define o atributo placeholder do Arbtrom Select - padrão: 'Choose an option' - exemplo: 'Selecione uma opção'

• maxHeight - - tipo: string - ação: define a altura máxima da lista de opções antes de criar a barra de rolagem - padrão: '200px'; - exemplo: '7rem'

• inputClass - - tipo: string - ação: define a classe que irá estilizar o Arbtrom Select - padrão: 'form-control' - exemplo: 'myClass' Os Arbtrom Selects foram feitos para funcionar nativamente com classes do framework Bootstrap, mas nada impede que o desenvolvedor altere esse padrão.

• parentElement - - tipo: string - ação: define a classe do elemento 'pai' que comporta tanto o select original quanto o novo Arbtrom Select. É essencial para o funcionamento da biblioteca que seja definida ou que o elemento pai realmente possua a classe padrão. - padrão: 'form-group' - exemplo: 'myParentClass'

• bullet - - tipo: boolean - ação: define se o Arbtron select exibirá ou não o ícone da seta do lado direito - padrão: true

• search - - tipo: boolean - ação: define se o Arbtron select exibirá ou não o ícone da lupa do lado direito ao ser selecionado - padrão: true

Exemplo com opções

<div class="form-group">
	<label for="mySelect"></label>
<select id="mySelect">
    <option value="0">Foo</option>
    <option value="1">Bar</option>
    <option value="2">Baz</option>
</select>
</div>

<script src="https://unpkg.com/arbtom@1.0.2/dist/arbtrom.js"></script>

<script>
window.onload = function(){
    document.getElementById('mySelect').arbtrom({
		maxHeight: '100%',
		placeholder: 'Type something',
		noResults: 'Try something else...'
	});
}
</script>