j-InputTags

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Configuração:

required {Boolean} opcional, permite o "requisito" (default: false)
icon {String} opcional, ícone para o rótulo, por exemplo, home, cog, etc.
licon {String} opcional, ícone esquerda, por exemplo, home, cog, etc.
liconclick {String} opcional, um caminho para o método function(component, input)
ricon {String} opcional, ícone direita, por exemplo, home, cog, etc.
riconclick {String} opcional, um caminho para o método function(component, input)
label {String} opcional, um rótulo (default é conteúdo HTML)
after {String} opcional, significa um carrinho após a etiqueta (default: :)
placeholder {String} opcional, adiciona um texto placeholder à entrada
validate {String} opcional, uma condição para validação de valor, pode conter um link para function(value) ou !!value.match(/[a-z]+/)
disabled {Boolean} opcional, desabilita este componente
error {String} opcional, adiciona um texto string abaixo do componente
spaces {Boolean} opcional, permite espaços caso contrário ele os remove (default: true)
innerlabel {Boolean} opcional, permite a etiqueta interna (default: true)
dirsource {String} opcional, o caminho para uma fonte de dados ou NEW pode conter um link para o método function(search, next(items_arr))
dircustom {String/Boolean} opcional, pode conter um caminho para function(val, next(new_val)) ou pode ser Boolean.Esta opção pode permitir adicionar um valor personalizado (valor não definido na fonte de dados)
dirrender {String} opcional, um caminho para function(item, text) (deve retornar HTML para j-Directory), esta função pode afetar a lista de itens em j-Directory
dirminwidth {Number} opcional, uma largura mínima para j-Directory, padrão: 200
dirmaxwidth {Number} opcional, uma largura máxima para j-Directory
dirplaceholder {String} opcional, um local para j-Directory
dirempty {String} opcional, adiciona um campo vazio para j-Directory
dirkey {String} opcional, um nome chave para a leitura de text em dirsource (default: name)
dirvalue {String} opcional, um nome chave para a leitura de value em dirsource (default: id)
autosource {String} um caminho para a função search em autocomplete, function(search, render(arr))
autovalue {String} um caminho de propriedade para o valor em autosource
transform {Number} opcional, transforma o texto 0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize (default: 0)
enteronly {Boolean} opcional, adiciona um novo valor depois que a chave enter é pressionada (default: true)

Interessante em:

dirsource:path.to.datasource necessita directory componente
Se licon ou ricon começa com !, então o componente faz um valor razoável em vez de icon.
dirsource com caminhos para métodos pode carregar dados sem sincronização

Use-o com <ui-component name="inputtags">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

example.html

<ui-component name="directory" config="placeholder:Search..."></ui-component>

<div style="width:400px">
	<ui-component name="inputtags" path="form.frameworks" config="required:1;placeholder:Type a framework name;dirsource:frameworks">Framework</ui-component>
	<br />
	<ui-component name="inputtags" path="form.countries" config="innerlabel:true">Country</ui-component>
</div>

<script>
	var frameworks = [{ id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var form = { framework: [1], countries: ['Slovakia', 'Poland', 'Hungary', 'Germany'] };
</script>