# j-DynamicValueList

> This component is very special component. It can keep values for example Number and at the same it can render another readable text. This component is optimized for dynamic usage, so it needs to be li

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

This component is very special component. It can keep values for example `Number` and at the same it can render another readable `text`. This component is optimized for dynamic usage, so it needs to be linked with another component or part. This component works with array.


__Configuration__:

- `icon {String}` icon for label e.g. home, cog, etc.
- `label {String}` label (default is HTML content)
- `icon2 {String}` icon in the right box e.g. home, cog, etc. (default: `angle-down`)
- `placeholder {String}` adds a placeholder text
- `disabled {Boolean}` disables this component
- `find {String}` __important__ link to `function(el, next(value))` for binding a new value
- `read {String}` a link to `function(array_of_values, next(array_response))` for binding a readable `text`
- `url {String}` tries to bind a value via `AJAX()`, argument `{0}` in URL is replaced by the value
- `html {String}` Tangular template for rendering a value (default: `{{ name }}`)
- `remap {String}` a remap function (default: `null`), example: `value.length ? value[0] : null`
- `required {Boolean}` enables "required" (default: `false`)
- `bind {String}` a path to method or variable where will be binded loaded value (optional)
- `dirsource {String}` a link to method `function(search_string, next(items_arr))` or __NEW__: can contain URL for search in fhe form `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` can contain a path to function(val, next(new_val)) or can be Boolean. This option can enable adding a custom value (value not defined in data-source)
- `dirrender {String}` a path to `function(item, text)` (must return HTML for j-Directory), this function can affect list of items in j-Directory
- `dirminwidth {Number}` a minimum width for j-Directory, (default: `200`)
- `dirmaxwidth {Number}` a maximum width for j-Directory
- `dirplaceholder {String}` a placeholder for j-Directory
- `dirempty {String}` adds an empty field for j-Directory
- `dirkey {String}` a key name for reading of text in dirsource (default: `name`)
- `dirvalue {String}` a key name for reading of value in dirsource (default: `id`)
- `key {String}` a primary key name (default: a value from `dirvalue`)
- __NEW__ `tapi {Boolean}` enables calling `TAPI()` insteadof `AJAX()` (default: false)

### AJAX usage

If the `value` will be changed then the component performs `AJAX` call automatically. Server must response with `Array`.

```html
<ui-component name="dynamicvaluelist" path="path.to.property" config="url:/users/?id={0};dirsource:GET /users/?search={0}"></ui-component>
```

### Inline usage

If the `value` will be changed then the component performs `config.exec` for obtaining a readable text of a value.

```html
<ui-component name="dynamicvaluelist" path="path.to.property" config="read:my_function"></ui-component>

<script>
	function my_function(arr, next) {
		// the component automatically pairs "response" with "arr"
		next([{ id: 1, name: 'This text will be displayed as a value '}]);
	}
</script>
```

Use it with `<ui-component name="dynamicvaluelist">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="directory"></ui-component>

<div class="m" style="width:300px">
	<ui-component name="dynamicvaluelist" path="common.users" config="read:getusers;dirsource:findusers;placeholder:Add user">Users</ui-component>
</div>

<script>
	var names = [];
	names.push({ id: '1', name: 'Denis' });
	names.push({ id: '2', name: 'Peter' });
	names.push({ id: '3', name: 'Tomáš' });
	names.push({ id: '4', name: 'Lucka' });
	names.push({ id: '5', name: 'Lenka' });

	function getusers(value, next) {
		var temp = [];
		for (var i = 0; i < value.length; i++) {
			var user = names.findItem('id', value[i]);
			user && temp.push(user);
		}
		next(temp);
	}

	function findusers(search, next) {
		var items = names.slice(0);
		next(items);
	}

</script>
```