# j-InputTags

> j-InputTags: wenn licon oder ricon mit ! beginnt dann rendert die Komponente einen Rohwert anstelle eines Symbols

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 08519564b102c61506bbdcf10f6fc276b84d26ece82b7858e21ad35a3ee4236c
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Konfiguration__:

- `required {Boolean}` optional, aktiviert „erforderlich“ (Standard: `false`)
- `icon {String}` optionale, Ikon für die Etikette z.B. `home`, `cog`, etc.
- `licon {String}` optionale, linken Ikon z. B. `home`, `cog`, etc.
- `liconclick {String}` optionale, eine Art und Weise zu `function(component, input)`
- `ricon {String}` optionale, rechte Ikon z. B. `home`, `cog`, etc.
- `riconclick {String}` optionale, eine Art und Weise zu `function(component, input)`
- `label {String}` optionale, eine Etikette (Default ist HTML-Inhalte)
- `after {String}` optionale, das bedeutet eine Char nach der Etikette (Default: `:`)
- `placeholder {String}` optional, fügt der Eingabe einen `placeholder`-Text hinzu
- `validate {String}` optional, eine Bedingung zur Validierung des Werts, kann einen Link zu `function(value)` oder `!!value.match(/[a-z]+/)` enthalten
- `disabled {Boolean}` optional, deaktiviert diese Komponente
- `error {String}` optionale, fügt einen `string` Text unter der Komponente hinzu
- `spaces {Boolean}` optional, aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: `true`)
- `innerlabel {Boolean}` optionale, ermöglicht die innere Etikette (Default: `true`)
- `dirsource {String}` Option, Weg zu einer Datenquelle oder __NEW__ kann einen Link zur Methode `function(search, next(items_arr))` enthalten
- `dircustom {String/Boolean}` optionale, kann einen Weg zu `function(val, next(new_val))` enthalten oder kann `Boolean`. Diese Option ermöglicht die Einhaltung eines angepassten Wertes (Wert nicht definiert in der Datenquelle)
- `dirrender {String}` optionale, eine Route zu `function(item, text)` (HTML für `j-Directory` zurückkehren muss), kann diese Funktion die Liste der Elemente in `j-Directory` beeinflussen
- `dirminwidth {Number}` optionale, minimale Breite für `j-Directory`, Standard: `200`
- `dirmaxwidth {Number}` optionale, eine maximale Breite für `j-Directory`
- `dirplaceholder {String}` optionale, ein Platzinhaber für `j-Directory`
- `dirempty {String}` optionale, fügt ein leeres Feld für `j-Directory` hinzu
- `dirkey {String}` optionale, ein Schlüsselname für die Lesung von `text` in `dirsource` (Default: `name`)
- `dirvalue {String}` optionale, ein Schlüsselname für die Lesung von `value` in `dirsource` (Default: `id`)
- `autosource {String}` ein Pfad zur Funktion `search` in `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` eine Eigentumsstraße für den Wert in `autosource`
- `transform {Number}` optionale, umwandelt den Text `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (Default: `0`)
- `enteronly {Boolean}` optionale, fügt eine neue Wert hinzu, nachdem der `enter`-Schlüssel gedruckt wird (Default: `true`)

__Interessant:__

- `dirsource:path.to.datasource` benötigt __`directory`__ Komponente
- Wenn `licon` oder `ricon` mit `!` beginnt, dann stellt die Komponente einen Rohwert anstelle von `icon` dar.
- `dirsource` mit Wegen zu Methoden kann Daten asynchronisch laden

Verwenden Sie es mit `<ui-component name="inputtags">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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