# j-Directory

> È un componente simile a quello di j-Suggestion, ma ha migliorato la progettazione e supporta funzionalità più intelligenti.

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

È un componente simile a quello di `j-Suggestion`, ma ha migliorato la progettazione e supporta funzionalità più intelligenti.

- singolo
- Lavorare con il tocco
- Sviluppo - Modo oscuro

> __IMPORTANT__: per impostazione predefinita questo componente ritorna un valore come testo dalla proprietà `name`.


__Metodi__:

Metodo: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` un elenco di elementi (tipo `String` significa un collegamento alla fonte dei dati)
- `options.offsetX {Number}` opzionale, `x` offset (default: `0`)
- `options.offsetY {Number}` opzionale, `y` offset (default: `0`)
- `options.offsetWidth {Number}` opzionale, `width` offset (default: `0`)
- `options.placeholder {String}` opzionale, un locatore per il campo di ricerca
- __NEW__ `options.height {Number}` opzionale, un'altezza del contenitore (default: `180`)
- `options.render {Function}` opzionale, una funzione per il rendering personalizzato dell'oggetto `function(item, text)` deve restituire `HTML`
- `options.custom {Boolean/String}` opzionale, consente di restituire un valore non definito in `options.items`, predefinito: `false`
- `options.minwidth {Number}` opzionale, una larghezza minima, standard `200`
- `options.maxwidth {Number}` opzionale, una larghezza massima, standard `infinite`
- `options.callback(selected_item, element, iscustom, e) {Function}` viene rilasciato quando l'utente fa clic sull'oggetto
- `options.key {String}` opzionale, un valore predefinito `key` per `text` (predefinita: `name`)
- `options.empty {String}` opzionale, aggiunge campo vuoto
- `options.exclude {Function}` opzionale, può escludere gli articoli e deve restituire un boolean `function(item) { return item.id !== 100 }`
- `options.close {Function}` opzionale, può determinare la chiusura del pannello
- `options.search {Boolean/String}` opzionale, può nascondere il campo di ricerca (default: `true`) o `{String}` (nome chiave) può mapare un valore per la ricerca
- `options.selected {Object}` opzionale, può contenere un valore selezionato (default: `undefined`)
- `options.align {String}` opzionale, `left` (default), `right` o `center`
- `options.position {String}` opzionale, `top` (default), `bottom`
- `options.raw {Boolean}` opzionale, questa opzione impedisce l'escapazione di caratteri (in altre parole: il contenuto HTML sarà consentito nelle etichette degli articoli, in modo predefinito: `false`)
- `options.classname {String}` opzionale, una classe di contenitore personalizzata per tutti gli articoli
- La posizione assoluta funziona solo se il `options.element` non è definito
	- `options.x {Number}` posizione assoluta X
	- La posizione assoluta di `options.y {Number}` e
- `options.checkbox {Boolean}` opzionale, consentono i checkboxes
- `options.checked {Array String}` opzionale, identificatori di oggetti controllati
	- Trattamento per `options.items {Function(q, next)}`
	- Il callback restituisce solo gli identificatori crudi `Array {String}`
- __NEW__ `options.template {String}` opzionale, un modello personalizzato Tangular ecc. `{{ name }}` (default: null)
- __NEW__ `options.fuzzy {Boolean}` opzionale, può disattivare la ricerca fuzzy (default: `true`)

Metodo: `component.hide()`

__Configurazione__:
- `placeholder` - un sito per la ricerca di input
- `create` - un contenitore per l'etichetta `Create` (default: `Create`)

__I campi supportati__:

- `name {String}` un nome di marchio
- `template {String}` opzionale, un modello personalizzato Tangular
- `classname {String}` opzionale, aggiunge ulteriori classi all'elemento `<li>`
- `disabled {Boolean}` opzionale, può disattivare l'articolo
- `selected {Boolean}` opzionale, seleziona l'oggetto

__Formattazione tramite Tangular__:

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

__Formattare tramite funzione personalizzata__:

```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>';
};
```

__Aggiungi la classe custom__:

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

__Servizio di ricerca__:

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

__Buono sapere__:

- se `checkboxes:true` quindi il componente estende gli articoli aggiungendo un timestamp `selectedts {Number}` a causa dell'ordine

Utilizzare con `<ui-component name="directory">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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