Un select Box avec plein de Options [Résolu]

[Soulama]

bonjour,
j'ai un SelectBox que je remplie avec des users d'une base de donnees.
Le box contient 5000 entrées.
Donc dans mon HTML jai 3 select box chacun rempli de 5000 users, car je fais des recherches sur la base de données pour trois champs( Contact User, First Created By, Entry Created By ).
Sous Firefox et Chrome, j'ai pas de probleme de performance. mais sur IE6 ca prend vraiment du temps pour faire le rendering des selectBoxes.
J'ai demande au Boss de faire un autocomplete Widget au lieu du selectBox, il refuse pour des raisons de consistance du UI.
Si vous avec une idee comment optimiser ce probleme de performance sous IE6, je suis preneur.
Voila la methode que j'utilise pour dessiner les selectBoxes:

Code :

1
2
3
4
5
6
7
8
9
 
function createComboBox( list, targetId, selectorHead ){
    var comboBox = selectorHead;
    for( var i = 0; i < list.length ; i++ ) {
        comboBox += '<option value="' + list[i].index + '">' + list[i].optionText + '</option>\n';
    }
    comboBox += '</select>';
    $(targetId).html( comboBox );
};

[Arnaud F.]

Bonjour,

je vous suggère très fortement de lire ce billet de blog qui explique très bien ce que l'on peut se permettre et non avec jQuery et surtout avec les append :

(EN) http://www.learningjquery.com/2009/0...pend-correctly

Mais ce qu'il faut en retenir c'est que le temps d'exécution peut être divisé par 6 sur IE6 en utilisant la méthode suivante !

Code :

1
2
3
4
5
6
7
8
9
10
 
function createComboBox( list, targetId, selectorHead ){
    var comboBox = selectorHead,
        options = [], i;
 
    for(i = 0; i < list.length ; i++ ) {
        options[i++] = '<option value="' + list[i].index + '">' + list[i].optionText + '</option>\n';
    }
    $(targetId).append(options.join(''));
};

De plus, si targetId correspond à l'ID du select, il n'y a plus besoin de rajouter le </select> final.

++

[Soulama]

merci arnaud je vais lire le liens, et je vais tester la methode que tu me suggere.

ps: le targetId dans mon cas cest un div

[Arnaud F.]

Dans ce cas il faut rajouter la création du select.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function createComboBox( list, targetId, selectorHead ){
    var comboBox = selectorHead,
        select = [], i = 0;
 
    select[i++] = '<select>';
    for(; i < list.length ; i++ ) {
        select[i++] = '<option value="' + list[i].index + '">' + list[i].optionText + '</option>\n';
    }
    select[i++] = '</select>';
 
    $(targetId).append(select.join(''));
};

[SpaceFrog]

juste si tu as besoin d'utiliser le name du select ensuite:

Code :

1
2
3
4
5
6
7
var sel=document.createElement('<select name="mysel">')
myopt=''
for (i=0;i<5000;i++){
  myopt+='<option value="'+i+'">'+i+'</option>';
 }
$(sel).append(myopt)
$('#foo').append(sel)

[Soulama]

merci Arnaud et SpaceFrog, ca ma beacoup aider.

[Arnaud F.]

Envoyé par Soulama

merci Arnaud et SpaceFrog, ca ma beacoup aider.

Vous avez gagné combien de temps environ?

[Soulama]

avant jai u un rendering des SelectBoxes entre 10 et 15 secoonde. avec le nouveau code cest entre 5 a 8 secondes, presque la moitier du temps jai gagner, perfect