j-InputTags

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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.

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>