# j-Spotlight

> j-Spotlight: singletone; funziona con il sistema di rete Bootstrap

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

- singolo
- Funziona con il sistema Bootstrap Grid

__Configurazione__:

- `height` {Numero} un'altezza predefinita di ciascun elemento (definito: `40`, deve essere definito anche in CSS)
- `placeholder` {String} un locatore predefinito (default: `Search`)

__Metodi__:

Metodo: `component.show(opt)`

- `opt.id {String}` opzionale, un identificatore per gli articoli recenti (default: `empty`)
- `opt.recent {String}` permette gli articoli recenti, deve contenere un formato di scadenza (default: `3 days`, `empty` significa disabilitato)
- `opt.callback(selected_item) {Function}` viene rilasciato quando l'utente fa clic sull'oggetto
- `opt.cancel {Function}` viene rilasciato e l'utente cancella il componente
- L'indirizzo URL `opt.search {String}` per la ricerca di valori nel modulo `GET /api/search/?={0}`
- o `opt.search {Function}` un link a `function(search, next(ARR_ITEMS))` per la ricerca
- `opt.cache {String}` consente la cache, può contenere un formato di scadenza come `1 day` o `session`
- `opt.remap {Function}` può rimuovere i risultati di `items => items.map(...)`
- `opt.clear {Boolean}` rimuove i risultati precedenti (default: `false`)
- `opt.init {Boolean}` fa una ricerca vuota quando il componente è chiamato (default: `false`)
- `opt.delay {Number}` un ritardo in `ms` per eseguire la ricerca (default: `100`)
- `opt.height {Number}` un'altezza dell'oggetto (default: `config.height`)
- `opt.class {String}` aggiunge una classe personalizzata al contenitore
- __NEW__ `opt.placeholder` {String} localizzatore di ricerca (default: `config.placeholder`)

__Buono sapere__:

- Il campo `.items = [{ html }]` -> `html` (in articoli) sarà rilasciato come un semplice HTML

Utilizzare con `<ui-component name="spotlight">`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="spotlight" config="placeholder:Search ..."></ui-component>

<div class="container">
	<a href="javascript:spotlight()">Show Spotlight</a>
</div>

<script>
	function spotlight() {

		var opt = {};

		opt.search = function(value, next) {
			// console.log(value);
			next([{ name: 'Dashboard' }, { name: 'Invoices' }, { name: 'Orders' }, { name: 'Products' }, { name: 'Pages' }, { name: 'Notes' }, { name: 'Users' }, { name: 'Settings' }]);
		};

		opt.callback = function(item) {
			console.log('Selected item:', item);
		};

		SETTER('spotlight/show', opt);
	}

	setTimeout(spotlight, 500);
</script>
```