# j-KeySelection

> Questo componente consente all'utente di selezionare alcuni articoli con le chiavi in alto/in basso e confermare la selezione con la chiave di ingresso.

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

Questo componente consente all'utente di selezionare alcuni articoli con le chiavi in alto/in basso e confermare la selezione con la chiave `enter`.

- Supporto per auto-scroll

__Configurazione__

- `selectoritem {String}` un selettore per gli articoli di navigazione (default: `.item`)
- `selector {String}` un selettore predefinito per la cattura delle chiavi (predefinita: `input`)
- `class {String}` una classe di selezione (default: `selected`)
- `autoselect {Boolean}` dovrebbe selezionare il primo elemento (default: `true`)
- `autoscroll {Boolean}` consente/disabilita auto-scroll (default: `true`)
- `exec {String}` un collegamento al `function(jqueryel)`, valutato dalla chiave `enter` (opzionale, altrimenti sarà l'evento di `click`)
- `delay {Number}` un ritardo per il primo valore di selezione automatica
- `datasource {String}` un collegamento alla fonte di dati che può aiutarti con una lista dinamica

Utilizzare con `<ui-component name="keyselection">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```