j-Spotlight

• 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.

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