Bubblesort en JavaScript

Dans un CMS, un des champs d'un formulaire permet à l'utilisateur de faire un choix à l'intérieur d'un selectbox. Comme c'est parfois le cas, l'élément recherché n'est pas disponible dans la liste et l'utilisateur doit changer de page pour aller dans un autre module ajouter un élément dans la liste de référence utilisé pour populer la liste de sélection du formulaire initial. Si le système est mieux pensé, il sera possible d'ajouter une entrée à la liste de référence sans même quitter le formulaire en cours d'édition. Parfois, ce sera sous forme d'un popup qui affichera un formulaire simplifié, qui soumettra le contenu à la base de données à l'aide d'un appel Ajax, qui lui-même retournera comme réponse l'identificateur unique et le libellé à venir glisser par JavaScript dans le selectbox du formulaire parent.

Voilà ce qui décrit le système sur lequel je travaillais cet après-midi. Tout fonctionnait à merveille. Le seul défaut, c'est que la nouvelle entrée s'insérait à la toute fin de la liste de référence au lieu de se positionner correctement par ordre alphabétique. Je me disais qu'une simple fonction de tri JavaScript de type "bubblesort" appliqué sur les options du selectbox serait suffisant pour rafraîchir l'ordre de la liste.

Un exemple de liste :

<select id="mySelectBox">
   <option value="5">E</option>
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="4">D</option>
   <option value="26">Z</option>
   <option value="3">C</option>
   <option value="10">J</option>
</select>

J'ai codé cette fonction bubblesort en JavaScript qui fait le travail minimum pour répondre au besoin :

function bubbleSortOptionsByText(optionsList){
   var length = optionsList.length;
   var swap1, swap2;

   while(length > 0){
       for(var i=1 ; i<length ; i++){
           if(optionsList[i-1].text > optionsList[i].text){
               swap1 = optionsList[i-1];
               swap2 = optionsList[i];

               optionsList[i-1] = swap2;
               optionsList[i] = swap1;
           }
       }
       length = length-1;
   }

   return optionsList;
}

Appel avec jQuery :

$j = jQuery.noConflict();

$j(document).ready(function(){
   var elems = $j('#mySelectBox option');
   elems = bubbleSortOptionsByText(elems);
   $j('#mySelectBox').html(elems);
});

Ça fonctionne. Malgré tout, la fonction comporte quelques défauts :

• elle ne peut trier que par le texte affiché et non par la valeur (dans ce cas, on pourrait remplacer optionsList[i].text par optionsList[i].value)
• il s'agit d'un tri alphanumérique donc sur une liste comportant des libellés ou des valeurs de 1 à 99, l'ordre logique positionnerait 10 immédiatement après 1 (plutôt qu'à la suite de 9)
  
• l'opérateur de comparaison force le tri ascendant (dans ce cas, de A à Z)
• ce n'est peut-être pas le meilleur algorithme de tri pour la performance
  

Bien sûr, la fonction aurait pu être améliorée pour être plus flexible pour des projets futurs et c'est seulement après l'avoir écrite que je me suis souvenu qu'il y a presqu'un an, j'avais utilisé le plugin jQuery TinySort pour résoudre un problème similaire sur le DOM.

J'ai relu mon propre billet, je l'ai mis à l'essai et presque par magie, TinySort contourne avec brio les défauts mentionnés plus haut. De plus, une seule ligne de code facile à lire suffit :

$j('#mySelectBox option').tsort({'attr':'text', 'order': 'asc'});

J'ai fait disparaître ma fonction pour la remplacer par ce petit plugin dont j'apprécie maintenant encore plus l'utilité.