# j-InputTags

> j-InputTags: ak licon alebo ricon začína na ! potom komponent vykreslí surovú hodnotu namiesto ikony

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 387d76e1a88e1038cf784985789b10be0bc8ae3573c4df9f34fe21258c5bbe70
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Konfigurácia__:

- `required {Boolean}` voliteľné, umožňuje "povinné" (predvolené: `false`)
- `icon {String}` voliteľné, ikona pre štítok napr. `home`, `cog` atď.
- `licon {String}` voliteľné, ikona vľavo napr. `home`, `cog` atď.
- `liconclick {String}` voliteľné, cesta k metóde `function(component, input)`
- `ricon {String}` voliteľné, pravá ikona napr. `home`, `cog` atď.
- `riconclick {String}` voliteľné, cesta k metóde `function(component, input)`
- `label {String}` voliteľné, štítok (predvolený je obsah HTML)
- `after {String}` voliteľné, to znamená znak za štítkom (predvolené: `:`)
- `placeholder {String}` voliteľné, do vstupu pridá text `placeholder`
- `validate {String}` voliteľné, podmienka pre overenie hodnoty, môže obsahovať prepojenie na `function(value)` alebo `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` voliteľné, deaktivuje tento komponent
- `error {String}` voliteľné, pridá text `string` pod komponent
- `spaces {Boolean}` voliteľné, povolí medzery, inak ich odstráni (predvolené: `true`)
- `innerlabel {Boolean}` voliteľné, umožňuje vnútorný štítok (predvolené: `true`)
- `dirsource {String}` voliteľné, cesta k zdroju údajov alebo __NEW__ môže obsahovať odkaz na metódu `function(search, next(items_arr))`
- `dircustom {String/Boolean}` voliteľné, môže obsahovať cestu k `function(val, next(new_val))` alebo môže byť `Boolean`. Táto možnosť môže povoliť pridanie vlastnej hodnoty (hodnota nie je definovaná v zdroji údajov)
- `dirrender {String}` voliteľné, cesta k `function(item, text)` (musí vrátiť HTML pre `j-Directory`), táto funkcia môže ovplyvniť zoznam položiek v `j-Directory`
- `dirminwidth {Number}` voliteľné, minimálna šírka pre `j-Directory`, predvolená: `200`
- `dirmaxwidth {Number}` voliteľné, maximálna šírka pre `j-Directory`
- `dirplaceholder {String}` voliteľné, zástupný znak pre `j-Directory`
- `dirempty {String}` voliteľné, pridá prázdne pole pre `j-Directory`
- `dirkey {String}` voliteľné, názov kľúča na čítanie `text` v `dirsource` (predvolené: `name`)
- `dirvalue {String}` voliteľné, názov kľúča na čítanie `value` v `dirsource` (predvolené: `id`)
- `autosource {String}` cesta k funkcii `search` v `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` cesta vlastnosti pre hodnotu v `autosource`
- `transform {Number}` voliteľné, transformuje text `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (predvolené: `0`)
- `enteronly {Boolean}` voliteľné, po stlačení tlačidla `enter` pridá novú hodnotu (predvolené: `true`)

__Zaujímavé:__

- `dirsource:path.to.datasource` potrebuje __`directory`__ komponent
- ak `licon` alebo `ricon` začína `!`, potom komponent vykreslí surovú hodnotu namiesto `icon`
- `dirsource` s cestami k metódam môže načítať dáta asynchrónne

Použite ho so `<ui-component name="inputtags">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html 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>
```