# j-InputTags

> j-InputTags: se il licone o ricone inizia con ! allora il componente rilascia un valore crudo invece dell'icona

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

__Configurazione__:

- `required {Boolean}` opzionale, consente "necessario" (default: `false`)
- `icon {String}` opzionale, icona per etichette ecc. `home`, `cog`, ecc.
- `licon {String}` opzionale, icona sinistra, ecc. `home`, `cog`, ecc.
- `liconclick {String}` opzionale, un percorso per il metodo `function(component, input)`
- `ricon {String}` opzionale, icona destra ecc. `home`, `cog`, ecc.
- `riconclick {String}` opzionale, un percorso per il metodo `function(component, input)`
- `label {String}` opzionale, un'etichetta (default è il contenuto HTML)
- `after {String}` opzionale, significa un carico dopo l'etichetta (default: `:`)
- `placeholder {String}` opzionale, aggiunge un testo `placeholder` all'ingresso
- `validate {String}` opzionale, una condizione per la validazione del valore, può contenere un link a `function(value)` o `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` opzionale, disabilita questo componente
- `error {String}` opzionale, aggiunge un testo `string` sotto il componente
- `spaces {Boolean}` opzionale, permette spazi altrimenti li rimuove (default: `true`)
- `innerlabel {Boolean}` opzionale, permette l'etichetta interna (default: `true`)
- `dirsource {String}` opzionale, la strada a una fonte di dati o __NEW__ può contenere un collegamento al metodo `function(search, next(items_arr))`
- `dircustom {String/Boolean}` opzionale, può contenere un percorso a `function(val, next(new_val))` o può essere `Boolean`.Questa opzione può consentire l'aggiunta di un valore personalizzato (valore non definito nella fonte dati)
- `dirrender {String}` opzionale, un percorso a `function(item, text)` (deve essere restituito HTML per `j-Directory`), questa funzione può influenzare l'elenco degli articoli in `j-Directory`
- `dirminwidth {Number}` opzionale, una larghezza minima per `j-Directory`, standard: `200`
- `dirmaxwidth {Number}` opzionale, una larghezza massima per `j-Directory`
- `dirplaceholder {String}` opzionale, un contenitore di spazio per `j-Directory`
- `dirempty {String}` opzionale, aggiunge un campo vuoto per `j-Directory`
- `dirkey {String}` opzionale, un nome chiave per la lettura di `text` in `dirsource` (default: `name`)
- `dirvalue {String}` opzionale, un nome chiave per la lettura di `value` in `dirsource` (default: `id`)
- `autosource {String}` è un percorso per la funzione `search` in `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` un percorso di proprietà per il valore in `autosource`
- `transform {Number}` opzionale, trasforma il testo `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (default: `0`)
- `enteronly {Boolean}` opzionale, aggiunge un nuovo valore dopo la pressione della chiave `enter` (default: `true`)

__Interessante è:__

- `dirsource:path.to.datasource` richiede il componente __`directory`__
- se `licon` o `ricon` inizia con `!`, il componente rilascia un valore crudo invece di `icon`
- `dirsource` con i percorsi a metodi può caricare i dati in modo asincronico

Utilizzare con `<ui-component name="inputtags">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```