# j-Spotlight

> j-Spotlight: singleton; funcționează cu Bootstrap Grid System

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: ro
Content-SHA256: 62735be6f207f40b606f1796ab9adfe464d7764e1963f3caeadc7b3d94a86413
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Singletă
- Funcționează cu sistemul Bootstrap

__Configurarea__:

- `height` {Număr} o înălțime de bază a fiecărui element (default: `40`, trebuie definită și în CSS)
- `placeholder` {String} un locator standard (default: `Search`)

__Metode__:

Metodă: `component.show(opt)`

- `opt.id {String}` opțional, un identificator pentru elementele recente (default: `empty`)
- `opt.recent {String}` permite elementele recente, trebuie să conțină un format de expirare (default: `3 days`, `empty` înseamnă dezactivat)
- `opt.callback(selected_item) {Function}` este declanșat atunci când utilizatorul face clic pe elementul
- `opt.cancel {Function}` este dezactivat, apoi utilizatorul anulează componenta
- URL-ul `opt.search {String}` pentru căutarea valorilor în formularul `GET /api/search/?={0}`
- sau `opt.search {Function}` un link la `function(search, next(ARR_ITEMS))` pentru căutare
- `opt.cache {String}` permite cache, poate conține un format de expirare cum ar fi `1 day` sau `session`
- `opt.remap {Function}` poate remedia rezultatele `items => items.map(...)`
- `opt.clear {Boolean}` clarifică rezultatele anterioare (default: `false`)
- `opt.init {Boolean}` face o căutare goală atunci când componenta este numită (default: `false`)
- `opt.delay {Number}` o întârziere în `ms` pentru efectuarea căutării (default: `100`)
- `opt.height {Number}` o înălțime a elementului (defață: `config.height`)
- `opt.class {String}` adăuga o clasă personalizată la container
- __NEW__ `opt.placeholder` {String} localizator de căutare (default: `config.placeholder`)

__bine să știi__:

- `.items = [{ html }]` -> câmpul `html` (în articole) va fi prezentat ca un HTML plat

Utilizați-l cu `<ui-component name="spotlight">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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