Browse Source

Montrer et documenter l’option onEnterSubmit().

pull/1/head
Matthieu Marcillaud 2 years ago
parent
commit
57ff3cba76
  1. 10
      Readme.md
  2. 3
      javascript/spip_select2.js
  3. 26
      prive/squelettes/contenu/tester_select2.html

10
Readme.md

@ -72,6 +72,14 @@ En simplifiant cela pourrait ressembler à :
Cette option met en évidence le terme de recherche dans la liste des résultats, en appliquant
un span `.select2-rendered__match` sur le terme recherché, qui est par défaut décoré avec un souligné.
### onEnterSubmit
- `{onEnterSubmit: true}`
- ou `data-on-enter-submit="true"`.
Appuyer la touche Entrée en ayant le focus sur le sélecteur fermé soumet le formulaire (comportement généralement présent sur les navigateurs). Par défaut, Select2 quand à lui ouvre le sélecteur.
## Autocomplete Ajax
On peut indiquer une URL de recherche à Select2 afin qu’il obtienne la liste des choix en fonction de la recherche tapée par l’utilisateur. Un exemple est proposé dans le plugin, visible sur la page de test.
@ -104,4 +112,4 @@ jQuery('select.chosen').select2();
jQuery('select.chosen').spip_select2();
```
Il faudra également adapter les styles CSS spécifiques si vous en utilisiez, par exemple en fournissant `css/select2_public.css` (corrolaire de `css/chosen_public.css`)
Il faudra également adapter les styles CSS spécifiques si vous en utilisiez, par exemple en fournissant `css/select2_public.css` (corollaire de `css/chosen_public.css`)

3
javascript/spip_select2.js

@ -57,6 +57,7 @@
}, options);
}
// sortAlpha : trier les <option> par ordre alphabétique
if (options.sortAlpha || $select.data('sort-alpha')) {
options = $.extend(true, {
sorter: function (data) {
@ -66,6 +67,8 @@
}
}, options);
}
// highlightSearchTerm : souligner les lettres recherchées dans les textes des <option>
if (options.highlightSearchTerm || $select.data('highlight-search-term')) {
options = $.extend(true, {
templateResult: function(item) {

26
prive/squelettes/contenu/tester_select2.html

@ -17,6 +17,7 @@
<div class="formulaire_spip">
<h2 class="titrem">Selections uniques</h2>
<form action="#" method="GET">
<input type="hidden" name="exec" value="#ENV{exec}">
<div class="editer-groupe">
#SET{id,u1}
@ -98,6 +99,18 @@
</select>
</div>
#SET{id,u8}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">On Enter Submit</label>
<select class="select2" name="demo_#GET{id}" id="demo_#GET{id}"
data-on-enter-submit="true">
#GET{animaux}
</select>
</div>
</div>
<div class="boutons">
<button type="submit">Soumettre (ne fait rien)</button>
</div>
</form>
</div>
@ -106,6 +119,7 @@
<div class="formulaire_spip">
<h2 class="titrem">Selections multiples</h2>
<form action="#" method="GET">
<input type="hidden" name="exec" value="#ENV{exec}">
<div class="editer-groupe">
#SET{id,m1}
@ -179,6 +193,18 @@
#GET{animaux}
</select>
</div>
#SET{id,m8}
<div class="editer pleine_largeur">
<label for="demo_#GET{id}">On Enter Submit</label>
<select class="select2" name="demo_#GET{id}[]" id="demo_#GET{id}" multiple
data-on-enter-submit="true">
#GET{animaux}
</select>
</div>
</div>
<div class="boutons">
<button type="submit">Soumettre (ne fait rien)</button>
</div>
</form>
</div>

Loading…
Cancel
Save