# j-Directory

> Es handelt sich um eine ähnliche Komponente wie j-Suggestion, verfügt jedoch über ein verbessertes Design und unterstützt praktischere Funktionen.

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

Es handelt sich um eine ähnliche Komponente wie `j-Suggestion`, verfügt jedoch über ein verbessertes Design und unterstützt praktischere Funktionen.

- Singleton
- arbeitet mit Berührungen
- unterstützt den __Dark-Modus__

> __WICHTIG__: Standardmäßig rendert diese Komponente einen Wert als Text aus der Eigenschaft `name`.


__Methoden__:

Methode: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` eine Liste von Elementen (Typ `String` bedeutet einen Link zur Datenquelle)
- `options.offsetX {Number}` optional, `x` Offset (Standard: `0`)
- `options.offsetY {Number}` optional, `y` Offset (Standard: `0`)
- `options.offsetWidth {Number}` optional, `width` Offset (Standard: `0`)
- `options.placeholder {String}` optional, ein Platzhalter für das Suchfeld
- __NEW__ `options.height {Number}` optional, eine Höhe des Containers (Standard: `180`)
- `options.render {Function}` optional, eine Funktion zum benutzerdefinierten Rendern des Elements `function(item, text)` muss `HTML` zurückgeben
- `options.custom {Boolean/String}` optional, ermöglicht die Rückgabe eines Werts, der nicht in `options.items` definiert ist, Standard: `false`
- `options.minwidth {Number}` optional, eine minimale Breite, Standard `200`
- `options.maxwidth {Number}` optional, eine maximale Breite, Standard `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` wird ausgelöst, wenn der Benutzer auf das Element klickt
- `options.key {String}` optional, ein Standardwert `key` für `text` (Standard: `name`)
- `options.empty {String}` optional, fügt leeres Feld hinzu
- `options.exclude {Function}` optional, kann Elemente ausschließen und muss einen booleschen Wert `function(item) { return item.id !== 100 }` zurückgeben
- `options.close {Function}` optional, kann das Schließen des Panels bestimmen
- `options.search {Boolean/String}` optional, kann das Suchfeld ausblenden (Standard: `true`) oder `{String}` (Schlüsselname) kann einen Wert für die Suche zuordnen
- `options.selected {Object}` optional, kann einen ausgewählten Wert enthalten (Standard: `undefined`)
- `options.align {String}` optional, `left` (Standard), `right` oder `center`
- `options.position {String}` optional, `top` (Standard), `bottom`
- `options.raw {Boolean}` optional, diese Option deaktiviert das Escapezeichen von Zeichen (mit anderen Worten: HTML-Inhalte sind in Beschriftungen von Elementen zulässig, Standard: `false`)
- `options.classname {String}` optional, eine benutzerdefinierte Containerklasse für alle Elemente
- Die absolute Positionierung funktioniert nur, wenn `options.element` nicht definiert ist
	- `options.x {Number}` absolute Position X
	- `options.y {Number}` absolute Position y
- `options.checkbox {Boolean}` optional, aktiviert Kontrollkästchen
- `options.checked {Array String}` optional, Kennungen der geprüften Elemente
	- gezielt für `options.items {Function(q, next)}`
	– Der Rückruf gibt nur die Rohbezeichner `Array {String}` zurück
- __NEU__ `options.template {String}` optional, eine benutzerdefinierte Tangular-Vorlage, z. B. `{{ name }}` (Standard: null)
- __NEU__ `options.fuzzy {Boolean}` optional, es kann die Fuzzy-Suche deaktivieren (Standard: `true`)

Methode: `component.hide()`

__Konfiguration__:
- `placeholder` – ein Platzhalter für die Sucheingabe
- `create` – ein Platzhalter für die Bezeichnung `Create` (Standard: `Create`)

__Unterstützte Artikelfelder__:

- `name {String}` ein Labelname
- `template {String}` optional, eine benutzerdefinierte Tangular-Vorlage
- `classname {String}` optional, fügt dem Element `<li>` zusätzliche Klassen hinzu
- `disabled {Boolean}` optional, es kann das Element deaktivieren
- `selected {Boolean}` optional, es wählt das Element aus

__Formatierung über Tangular__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });
```

__Formatierung über benutzerdefinierte Funktion__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};
```

__Hinzufügen einer benutzerdefinierten Klasse__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });
```

__Serverseitige Suche__:

```js

var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);
```

__Gut zu wissen__:

- wenn `checkboxes:true` dann die Komponente erweitert, indem ein Timestamp `selectedts {Number}` aufgrund der Bestellung hinzugefügt wird

Verwenden Sie es mit `<ui-component name="directory">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

```html example.html
<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>
```