# j-Spotlight

> j-Spotlight: Сингълт; работи с системата за мрежа на Bootstrap

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

- Синглът
- Работи с Bootstrap

__Конфигуриране__:

- `height` {No} е стандартна височина на всеки елемент (предварително: `40`, трябва да бъде дефиниран в CSS също)
- `placeholder` {Стринг} е дефолтен местонахождател (дефолт: `Search`)

__Методи__:

Методът: `component.show(opt)`

- `opt.id {String}` опционален, идентификатор за последните елементи (предварително: `empty`)
- `opt.recent {String}` активира последните елементи, трябва да съдържа изтичане на срока (дефолт: `3 days`, `empty` означава деактивиран)
- `opt.callback(selected_item) {Function}` се освобождава, когато потребителят кликне върху елемента
- `opt.cancel {Function}` се освобождава, след което потребителят премахва компонента
- `opt.search {String}` URL адрес за търсене на стойности в формата `GET /api/search/?={0}`
- или `opt.search {Function}` връзка към `function(search, next(ARR_ITEMS))` за търсене
- `opt.cache {String}` позволява кеш, може да съдържа изтичане формат например `1 day` или `session`
- `opt.remap {Function}` може да премахне резултатите на `items => items.map(...)`
- `opt.clear {Boolean}` то изчиства предишни резултати (предварително: `false`)
- `opt.init {Boolean}` прави празна търсачка, когато компонентът се нарича (предварително: `false`)
- `opt.delay {Number}` закъснение в `ms` за извършване на търсене (предварително: `100`)
- `opt.height {Number}` - височина на елемента (предварително: `config.height`)
- `opt.class {String}` добавя персонализиран клас към контейнера
- __NEW__ `opt.placeholder` {String} търсене място (предварително: `config.placeholder`)

__Добре е да се знае__:

- `.items = [{ html }]` -> `html` поле (в елементи) ще бъде преразгледано като плосък HTML

Използвайте го с `<ui-component name="spotlight">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>
```