Discussion :

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.