j-InputTags

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

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.

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>