j-Spotlight

• Синглът
• Работи с 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.

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