# j-InputTags

> j-InputTags : si licon ou ricon commence par ! alors le composant affiche une valeur brute au lieu d'une icône

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

__Configuration__ :

- `required {Boolean}` en option, active "obligatoire" (par défaut : `false`)
- `icon {String}` en option, icône pour étiquette par ex. `home`, `cog`, etc.
- `licon {String}` en option, icône de gauche par ex. `home`, `cog`, etc.
- `liconclick {String}` facultatif, un chemin vers la méthode `function(component, input)`
- `ricon {String}` en option, icône de droite par ex. `home`, `cog`, etc.
- `riconclick {String}` facultatif, un chemin vers la méthode `function(component, input)`
- `label {String}` facultatif, une étiquette (la valeur par défaut est le contenu HTML)
- `after {String}` facultatif, cela signifie un caractère après l'étiquette (par défaut : `:`)
- `placeholder {String}` facultatif, ajoute un texte `placeholder` dans l'entrée
- `validate {String}` facultatif, condition de validation de valeur, peut contenir un lien vers `function(value)` ou `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` facultatif, désactive ce composant
- `error {String}` facultatif, ajoute un texte `string` sous le composant
- `spaces {Boolean}` facultatif, active les espaces sinon il les supprime (par défaut : `true`)
- `innerlabel {Boolean}` en option, active l'étiquette intérieure (par défaut : `true`)
- `dirsource {String}` facultatif, chemin vers une source de données ou __NEW__ peut contenir un lien vers la méthode `function(search, next(items_arr))`
- `dircustom {String/Boolean}` facultatif, peut contenir un chemin vers `function(val, next(new_val))` ou peut être `Boolean`. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
- `dirrender {String}` facultatif, un chemin vers `function(item, text)` (doit renvoyer du HTML pour `j-Directory`), cette fonction peut affecter la liste des éléments dans `j-Directory`
- `dirminwidth {Number}` en option, une largeur minimale pour `j-Directory`, par défaut : `200`
- `dirmaxwidth {Number}` en option, une largeur maximale pour `j-Directory`
- `dirplaceholder {String}` en option, un espace réservé pour `j-Directory`
- `dirempty {String}` facultatif, ajoute un champ vide pour `j-Directory`
- `dirkey {String}` en option, un nom de clé pour la lecture de `text` dans `dirsource` (par défaut : `name`)
- `dirvalue {String}` en option, un nom de clé pour la lecture de `value` dans `dirsource` (par défaut : `id`)
- `autosource {String}` un chemin vers la fonction `search` dans `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` un chemin de propriété pour la valeur dans `autosource`
- `transform {Number}` en option, transforme le texte `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (Par défaut : `0`)
- `enteronly {Boolean}` facultatif, ajoute une nouvelle valeur après avoir appuyé sur la touche `enter` (par défaut : `true`)

__Intéressant :__

- `dirsource:path.to.datasource` nécessite le composant __`directory`__
- si `licon` ou `ricon` commence par `!` alors le composant restitue une valeur brute au lieu de `icon`
- `dirsource` avec des chemins d'accès aux méthodes peut charger des données de manière asynchrone

Utilisez-le avec `<ui-component name="inputtags">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```