# j-Spotlight

> j-Spotlight: Singleton; Funktioniert mit dem Bootstrap Grid System

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

- Singleton
- Funktioniert mit dem Bootstrap Grid System

__Konfiguration__:

- `height` {Nummer} eine Standardhöhe jedes Elementes (Default: `40`, muss auch in CSS definiert werden)
- `placeholder` {String} ein Standardplatzinhaber (Default: `Search`)

__Methoden__:

Methode: `component.show(opt)`

- `opt.id {String}` optionale, ein Identifikator für neueste Gegenstände (Default: `empty`)
- `opt.recent {String}` ermöglicht neueste Elemente, muss ein Ablaufformat enthalten (Default: `3 days`, `empty` bedeutet nicht aktiviert)
- `opt.callback(selected_item) {Function}` wird ausgelöst, wenn der Benutzer auf das Element klickt
- `opt.cancel {Function}` wird ausgelöst, dann löscht der Benutzer die Komponente
- `opt.search {String}` URL für die Suche nach Werte im Formular `GET /api/search/?={0}`
- oder `opt.search {Function}` einen Link zu `function(search, next(ARR_ITEMS))` für die Suche
- `opt.cache {String}` ermöglicht Cache, kann ein Auslaufformat wie `1 day` oder `session` enthalten
- `opt.remap {Function}` es kann Ergebnisse `items => items.map(...)`
- `opt.clear {Boolean}` es reinigt vorherige Ergebnisse (Default: `false`)
- `opt.init {Boolean}` macht eine leere Suche, wenn die Komponente angerufen wird (Default: `false`)
- `opt.delay {Number}` eine Verzögerung in `ms` für die Durchführung der Suche (Default: `100`)
- `opt.height {Number}` eine Höhe des Objekts (Default: `config.height`)
- `opt.class {String}` fügt eine benutzerdefinierte Klasse an den Container hinzu
- __NEW__ `opt.placeholder` {String} Suchplatzinhaber (Default: `config.placeholder`)

__Gut zu wissen__:

- `.items = [{ html }]` -> `html` Feld (in Elementen) wird als eine reiche HTML dargestellt

Verwenden Sie es mit `<ui-component name="spotlight">`. 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="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>
```