# j-Spotlight

> j-Spotlight: singleton; funciona con el sistema Bootstrap Grid

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

- singleton
- funciona con el sistema Bootstrap Grid

__Configuración__:

- `height` {Número} una altura predeterminada de cada elemento (predeterminado: `40`, también debe definirse en CSS)
- `placeholder` {String} un marcador de posición predeterminado (predeterminado: `Search`)

__Métodos__:

Método: `component.show(opt)`

- `opt.id {String}` opcional, un identificador para elementos recientes (predeterminado: `empty`)
- `opt.recent {String}` habilita elementos recientes, debe contener un formato de vencimiento (predeterminado: `3 days`, `empty` significa deshabilitado)
- `opt.callback(selected_item) {Function}` se activa cuando el usuario hace clic en el elemento
- Se activa `opt.cancel {Function}` y el usuario cancela el componente.
- `opt.search {String}` Dirección URL para buscar valores en el formulario `GET /api/search/?={0}`
- o `opt.search {Function}` un enlace a `function(search, next(ARR_ITEMS))` para realizar búsquedas
- `opt.cache {String}` habilita el caché, puede contener un formato de caducidad, p. `1 day` o `session`
- `opt.remap {Function}` puede reasignar resultados `items => items.map(...)`
- `opt.clear {Boolean}` borra resultados anteriores (predeterminado: `false`)
- `opt.init {Boolean}` realiza una búsqueda vacía cuando se llama al componente (predeterminado: `false`)
- `opt.delay {Number}` un retraso en `ms` para realizar la búsqueda (predeterminado: `100`)
- `opt.height {Number}` una altura del elemento (predeterminado: `config.height`)
- `opt.class {String}` agrega una clase personalizada al contenedor
- __NEW__ `opt.placeholder` {Cadena} marcador de posición de búsqueda (predeterminado: `config.placeholder`)

__Es bueno saberlo__:

- `.items = [{ html }]` -> El campo `html` (en elementos) se representará como HTML simple

Úselo con `<ui-component name="spotlight">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```