j-Spotlight

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

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