# j-InputTags

> j-InputTags: si licon o ricon comienza con ! entonces el componente representa un valor sin procesar en lugar de un icono

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

__Configuración__:

- `required {Boolean}` opcional, habilita "requerido" (predeterminado: `false`)
- `icon {String}` opcional, icono para etiqueta, p. `home`, `cog`, etc.
- `licon {String}` opcional, icono izquierdo, p.e. `home`, `cog`, etc.
- `liconclick {String}` opcional, una ruta al método `function(component, input)`
- `ricon {String}` opcional, icono derecho, p.e. `home`, `cog`, etc.
- `riconclick {String}` opcional, una ruta al método `function(component, input)`
- `label {String}` opcional, una etiqueta (el contenido predeterminado es HTML)
- `after {String}` opcional, significa un carácter después de la etiqueta (predeterminado: `:`)
- `placeholder {String}` opcional, agrega un texto `placeholder` en la entrada
- `validate {String}` opcional, una condición para validar el valor, puede contener un enlace a `function(value)` o `!!value.match(/[a-z]+/)`
- `disabled {Boolean}` opcional, desactiva este componente
- `error {String}` opcional, agrega un texto `string` debajo del componente
- `spaces {Boolean}` opcional, habilita espacios, de lo contrario los elimina (predeterminado: `true`)
- `innerlabel {Boolean}` opcional, habilita etiqueta interior (por defecto: `true`)
- `dirsource {String}` opcional, la ruta a una fuente de datos o __NEW__ puede contener un enlace al método `function(search, next(items_arr))`
- `dircustom {String/Boolean}` opcional, puede contener una ruta a `function(val, next(new_val))` o puede ser `Boolean`. Esta opción puede permitir agregar un valor personalizado (valor no definido en la fuente de datos)
- `dirrender {String}` opcional, una ruta a `function(item, text)` (debe devolver HTML para `j-Directory`), esta función puede afectar la lista de elementos en `j-Directory`
- `dirminwidth {Number}` opcional, un ancho mínimo para `j-Directory`, predeterminado: `200`
- `dirmaxwidth {Number}` opcional, un ancho máximo para `j-Directory`
- `dirplaceholder {String}` opcional, un marcador de posición para `j-Directory`
- `dirempty {String}` opcional, agrega un campo vacío para `j-Directory`
- `dirkey {String}` opcional, un nombre clave para leer `text` en `dirsource` (predeterminado: `name`)
- `dirvalue {String}` opcional, un nombre clave para leer `value` en `dirsource` (predeterminado: `id`)
- `autosource {String}` una ruta a la función `search` en `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` una ruta de propiedad para el valor en `autosource`
- `transform {Number}` opcional, transforma el texto `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (Por defecto: `0`)
- `enteronly {Boolean}` opcional, agrega un nuevo valor después de presionar la tecla `enter` (predeterminado: `true`)

__Interesante:__

- `dirsource:path.to.datasource` necesita el componente __`directory`__
- si `licon` o `ricon` comienzan con `!`, entonces el componente representa un valor sin formato en lugar de `icon`.
- `dirsource` con rutas a métodos puede cargar datos de forma asincrónica

Úselo con `<ui-component name="inputtags">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>
```