# j-InputTags

> j-InputTags: om licon eller ricon börjar med ! då komponenten ger ett råvärde istället för ikon

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

__Konfigurera__:

- `required {Boolean}` valfritt, möjliggör "nödvändigt" (default: `false`)
- `icon {String}` valfritt, ikon för etikett t.ex. `home`, `cog`, etc.
- `licon {String}` valfritt, vänsterikon t.ex. `home`, `cog`, etc.
- `liconclick {String}` valfritt, en väg till metoden `function(component, input)`
- `ricon {String}` valfritt, högerikon t.ex. `home`, `cog`, etc.
- `riconclick {String}` valfritt, en väg till metoden `function(component, input)`
- `label {String}` är valfritt, en etikett (default är HTML-innehåll)
- `after {String}` är valfritt, det betyder en char efter etikett (default: `:`)
- `placeholder {String}` alternativ, lägger till en `placeholder` text i inmatningen
- `validate {String}` är valideringsvillkor och kan innehålla en länk till `function(value)` eller `!!value.match(/[a-z]+/)`.
- `disabled {Boolean}` alternativ, inaktiverar denna komponent
- `error {String}` alternativ, lägger till en `string` text under komponenten
- `spaces {Boolean}` valfritt, möjliggör utrymmen annars tar det bort dem (default: `true`)
- `innerlabel {Boolean}` valfritt, möjliggör inre etikett (default: `true`)
- `dirsource {String}` alternativ, väg till en datakälla eller __NEW__ kan innehålla en länk till metoden `function(search, next(items_arr))`
- `dircustom {String/Boolean}` är valfritt, kan innehålla en väg till `function(val, next(new_val))` eller kan vara `Boolean`.Detta alternativ kan ge dig möjlighet att lägga till ett anpassat värde (värde inte definieras i datakällan)
- `dirrender {String}` är valfritt, en väg till `function(item, text)` (du måste returnera HTML för `j-Directory`), denna funktion kan påverka listan över objekt i `j-Directory`
- `dirminwidth {Number}` valfritt, minsta bredd för `j-Directory`, standard: `200`
- `dirmaxwidth {Number}` valfritt, högsta bredd för `j-Directory`
- `dirplaceholder {String}` valfritt, en platsinnehavare för `j-Directory`
- `dirempty {String}` alternativ, lägger till ett tomt fält för `j-Directory`
- `dirkey {String}` valfritt, ett nyckelnamn för läsning av `text` i `dirsource` (default: `name`)
- `dirvalue {String}` valfritt, ett nyckelnamn för läsning av `value` i `dirsource` (default: `id`)
- `autosource {String}` en väg till `search` funktion i `autocomplete`, `function(search, render(arr))`
- `autovalue {String}` är en fastighetssida för värdet i `autosource`
- `transform {Number}` alternativ, omvandlar text `0 - none, 1 - lowercase, 2 - uppercase, 3 - capitalize` (Default: `0`)
- `enteronly {Boolean}` är valfritt och lägger till ett nytt värde efter att `enter`-nyckeln trycks (default: `true`)

__Intressanta är:__

- `dirsource:path.to.datasource` behöver __`directory`__ komponent
- Om `licon` eller `ricon` börjar med `!` så ger komponenten ett råvärde istället för `icon`.
- `dirsource` med vägar till metoder kan ladda data asynkroniskt

Använd den med `<ui-component name="inputtags">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

```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>
```