# j-InputTags

> j-InputTags: als licon of ricon begint met ! dan geeft de component een grondwaarde in plaats van een icon

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 7921870fbdd0b6e5ffce3771ac099d084530fe358dfb259dbc720e7463471546
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Configuratie__:

- `required {Boolean}` optioneel, mogelijk "verplicht" (default: `false`)
- `icon {String}` optioneel, icon voor etiket bijvoorbeeld `home`, `cog`, enz.
- `licon {String}` optioneel, linkse icon bijvoorbeeld `home`, `cog`, enz.
- `liconclick {String}` optioneel, een weg naar de methode `function(component, input)`
- `ricon {String}` optioneel, rechter icon bijvoorbeeld `home`, `cog`, enz.
- `riconclick {String}` optioneel, een weg naar de methode `function(component, input)`
- `label {String}` optioneel, een etiket (de standaard is HTML-inhoud)
- `after {String}` optioneel, het betekent een char na etiket (default: `:`)
- `placeholder {String}` optioneel, voegt een `placeholder` tekst toe aan de invoer
- `validate {String}` optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar `function(value)` of `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` optioneel, deze component wordt uitgeschakeld
- `error {String}` optioneel, voegt een `string` tekst onder de component toe
- `spaces {Boolean}` optioneel, maakt ruimte anders het verwijdert ze (default: `true`)
- `innerlabel {Boolean}` optioneel, mogelijk interne etikettering (default: `true`)
- `dirsource {String}` optioneel, de route naar een gegevensbron of __NEW__ kan een link bevatten naar de methode `function(search, next(items_arr))`
- `dircustom {String/Boolean}` is optioneel, kan een route bevatten naar `function(val, next(new_val))` of kan `Boolean`. Deze optie kan het toevoegen van een aangepaste waarde (waarde niet gedefinieerd in de gegevensbron)
- `dirrender {String}` optioneel, een route naar `function(item, text)` (must HTML retourneren voor `j-Directory`), deze functie kan de lijst van items in `j-Directory` beïnvloeden
- `dirminwidth {Number}` optioneel, een minimale breedte voor `j-Directory`, standaard: `200`
- `dirmaxwidth {Number}` optioneel, een maximale breedte voor `j-Directory`
- `dirplaceholder {String}` optioneel, een plaatshouder voor `j-Directory`
- `dirempty {String}` optioneel, voegt een leeg veld toe voor `j-Directory`
- `dirkey {String}` optioneel, een sleutelnaam voor het lezen van `text` in `dirsource` (default: `name`)
- `dirvalue {String}` optioneel, een sleutelnaam voor het lezen van `value` in `dirsource` (default: `id`)
- `autosource {String}` een weg naar `search` functie in `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` een eigendomsweg voor de waarde in `autosource`
- `transform {Number}` optioneel, transformeren de tekst `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (default: `0`)
- `enteronly {Boolean}` optioneel, voegt een nieuwe waarde toe nadat de `enter` sleutel wordt gedrukt (default: `true`)

__Interessant is:__

- `dirsource:path.to.datasource` nodig __`directory`__ component
- Als `licon` of `ricon` begint met `!`, dan is de component een grondwaarde in plaats van `icon`.
- `dirsource` met paden naar methoden kan gegevens asynchronisch opladen

Gebruik het met `<ui-component name="inputtags">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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