j-Spotlight

• Singularidade
• Trabalhe com o sistema Bootstrap Grid

Configuração:

• height {Número} uma altura padrão de cada item (default: 40, deve ser definido em CSS também)
• placeholder {String} um locatário padrão (default: Search)

Métodos:

Método: component.show(opt)

• opt.id {String} opcional, um identificador para itens recentes (default: empty)
• opt.recent {String} permite itens recentes, deve conter um formato de expiração (default: 3 days, empty significa desativado)
• opt.callback(selected_item) {Function} é desativado quando o usuário clique no item
• opt.cancel {Function} é desativado e o usuário cancelará o componente
• Endereço de URL opt.search {String} para pesquisar valores no formulário GET /api/search/?={0}
• ou opt.search {Function} um link para function(search, next(ARR_ITEMS)) para pesquisar
• opt.cache {String} permite cache, pode conter um formato de expiração, por exemplo, 1 day ou session
• opt.remap {Function} pode remover resultados items => items.map(...)
• opt.clear {Boolean} ele limpa os resultados anteriores (default: false)
• opt.init {Boolean} faz uma pesquisa vazia quando o componente é chamado (default: false)
• opt.delay {Number} um atraso em ms para realizar a pesquisa (default: 100)
• opt.height {Number} uma altura do item (default: config.height)
• opt.class {String} adiciona uma classe personalizada ao conector
• NEW opt.placeholder {String} localização de pesquisa (default: config.placeholder)

Bom para saber:

• .items = [{ html }] -> html campo (em itens) será renderizado como um plano HTML

Use-o com <ui-component name="spotlight">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>