# j-KeySelection

> Ce composant permet à l'utilisateur de sélectionner certains éléments à l'aide des touches haut/bas et de confirmer la sélection par la touche Entrée.

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

Ce composant permet à l'utilisateur de sélectionner certains éléments à l'aide des touches haut/bas et de confirmer la sélection par la touche `enter`.

- prend en charge le défilement automatique

__Configuration__

- `selectoritem {String}` un sélecteur pour parcourir les éléments (par défaut : `.item`)
- `selector {String}` un sélecteur par défaut pour capturer les clés (par défaut : `input`)
- `class {String}` une classe de sélection (par défaut : `selected`)
- `autoselect {Boolean}`, il doit sélectionner le premier élément (par défaut : `true`)
- `autoscroll {Boolean}` active/désactive le défilement automatique (par défaut : `true`)
- `exec {String}` un lien vers le `function(jqueryel)`, évalué par la clé `enter` (facultatif, sinon déclenchera l'événement `click`)
- `delay {Number}` un délai pour la sélection automatique de la première valeur
- `datasource {String}` un lien vers la source de données qui peut vous aider avec une liste dynamique

Utilisez-le avec `<ui-component name="keyselection">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```