# j-Spotlight

> j-Spotlight: singleton; works with Bootstrap Grid System

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

- singleton
- works with Bootstrap Grid System

__Configuration__:

- `height` {Number} a default height of each item (default: `40`, must be defined in CSS too)
- `placeholder` {String} a default placeholder (default: `Search`)

__Methods__:

Method: `component.show(opt)`

- `opt.id {String}` optional, an identifier for recent items (default: `empty`)
- `opt.recent {String}` enables recent items, must contain an expiration format (default: `3 days`, `empty` means disabled)
- `opt.callback(selected_item) {Function}` is triggered when the user clicks on the item
- `opt.cancel {Function}` is triggered then the user cancels component
- `opt.search {String}` URL address for searching of values in the form `GET /api/search/?={0}`
- or `opt.search {Function}` a link to `function(search, next(ARR_ITEMS))` for searching
- `opt.cache {String}` enables cache, can contain an expiration format e.g. `1 day` or `session`
- `opt.remap {Function}` it can remap results `items => items.map(...)`
- `opt.clear {Boolean}` it clears previous results (default: `false`)
- `opt.init {Boolean}` makes an empty search when the component is called (default: `false`)
- `opt.delay {Number}` a delay in `ms` for performing searching (default: `100`)
- `opt.height {Number}` a height of item (default: `config.height`)
- `opt.class {String}` adds a custom class to the container
- __NEW__ `opt.placeholder` {String} search placeholder (default: `config.placeholder`)

__Good to know__:

- `.items = [{ html }]` -> `html` field ( in items) will be rendered as a plain HTML

Use it with `<ui-component name="spotlight">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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