# j-Spotlight

> j-Spotlight: szingleton; Bootstrap Grid rendszerrel működik

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

- Szingapúr
- A Bootstrap Grid rendszer

__konfiguráció__:

- `height` {Number} az egyes elemek alapértelmezett magassága (az előzetes: `40`, meg kell határozni a CSS is)
- `placeholder` {String} egy alapértelmezett helytartó (default: `Search`)

__módszerek__:

Módszer: `component.show(opt)`

- `opt.id {String}` opcionális, a legújabb elemek azonosítója (default: `empty`)
- `opt.recent {String}` lehetővé teszi a legújabb elemeket, meg kell tartalmaznia a lejárati formátumot (például: `3 days`, `empty` azt jelenti, hogy kikapcsolva)
- A `opt.callback(selected_item) {Function}` akkor indítható, amikor a felhasználó kattintson az elemre
- A `opt.cancel {Function}` kiindul, majd a felhasználó törli az összetevőt
- `opt.search {String}` URL-cím a `GET /api/search/?={0}` formanyomtatvány értékek kereséséhez
- vagy `opt.search {Function}` a kereséshez szükséges `function(search, next(ARR_ITEMS))` link
- `opt.cache {String}` lehetővé teszi a cache-t, lehet tartalmazni egy kimeneti formátumot, például a `1 day` vagy a `session`
- `opt.remap {Function}` lehet helyreállítani az eredményeket `items => items.map(...)`
- `opt.clear {Boolean}` ez tisztítja a korábbi eredményeket (default: `false`)
- A `opt.init {Boolean}` üres keresést végez, amikor az összetevőt hívják (például: `false`)
- `opt.delay {Number}` a keresés elvégzéséhez szükséges `ms` késedelme (default: `100`)
- `opt.height {Number}` egy elem magassága (default: `config.height`)
- A `opt.class {String}` hozzáad egy személyre szabott osztályot a kontejnerhez
- __NEW__ `opt.placeholder` {String} keresési helytartó (default: `config.placeholder`)

__Jó tudni__:

- `.items = [{ html }]` -> `html` mező (az elemekben) egy tiszta HTML formátumban lesz megjelenítve

Használja a `<ui-component name="spotlight">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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