# j-KeySelection

> Este componente permite al usuario seleccionar algunos elementos con las teclas arriba/abajo y confirmar la selección con la tecla Intro.

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

Este componente permite al usuario seleccionar algunos elementos con las teclas arriba/abajo y confirmar la selección con la tecla `enter`.

- admite desplazamiento automático

__Configuración__

- `selectoritem {String}` un selector para buscar elementos (predeterminado: `.item`)
- `selector {String}` un selector predeterminado para capturar claves (predeterminado: `input`)
- `class {String}` una clase de selección (predeterminado: `selected`)
- `autoselect {Boolean}` debe seleccionar el primer elemento (predeterminado: `true`)
- `autoscroll {Boolean}` habilita/deshabilita el desplazamiento automático (predeterminado: `true`)
- `exec {String}` un enlace al `function(jqueryel)`, evaluado por la clave `enter` (opcional, de lo contrario se activará el evento `click`)
- `delay {Number}` un retraso para la selección automática del primer valor
- `datasource {String}` un enlace a la fuente de datos que puede ayudarle con una lista dinámica

Úselo con `<ui-component name="keyselection">`. 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>
	.selected { background: #F0F0F0; }
	.item { line-height: 24px; padding: 0 10px; border-top: 1px solid #E0E0E0; font-size: 12px; }
</style>

<ui-component name="keyselection" config="exec:confirmselection">
	<div class="m"><input type="text" placeholder="Press UP or DOWN key" style="width:300px" /></div>
	<div class="items">
		<div class="item" data-id="1">1</div>
		<div class="item" data-id="1">2</div>
		<div class="item" data-id="1">3</div>
		<div class="item" data-id="1">4</div>
		<div class="item" data-id="1">5</div>
	</div>
</ui-component>

<script>

	function confirmselection(el) {
		console.log('selected', el);
	}

</script>
```