2015-07-30 1 views
-1

Contrairement à d'autres réponses suggérées pour utiliser le framework JavaScript, je souhaite connaître la solution possible pour afficher les enregistrements trop lentement.Zone de liste déroulante affichant trop lent avec des données volumineuses dans le navigateur Chrome

Possiblilities (mes vues):

1- Charger disent seulement 100 enregistrements et tout en faisant défiler au dernier enregistrement, les 100 enregistrements suivants sont affichés (total 200) et ainsi de suite. ("Mais comment y parvenir" est la question). Dans ce cas, Ajax peut être utilisé.

2- S'il existe une propriété de l'élément qui peut mettre en mémoire tampon l'enregistrement ou nous pourrions mettre les enregistrements en tampon avec JavaScript. En plus de ça, je suis un novice. Il doit y avoir une solution de rechange, veuillez me suggérer la bonne approche. Certains exemples de travail seront appréciables.

document.writeln("<select>"); 
 
for(var i = 1; i < 10000; i++){ 
 
\t document.writeln("<option value='" + i + "'>" + i + "</option>"); 
 
} 
 
document.writeln("</select>");
<html> 
 
<head> 
 
<script src="script.js"></script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

Répondre

0
<!DOCTYPE html> 
     <html> 
     <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

     </head> 
     <body> 
     <!-- you can adjust showing number of data from here --> 
     <select id='slr' onfocus='this.size=5;' onblur='this.size=1;' 
       onchange='this.size=1; this.blur();' > 
     <option>ram1</option> 
     <option>ram2</option> 
     <option>ram3</option> 
     <option>ram4</option> 
     <option>ram5</option> 
     <option>ram6</option> 
     <option>ram7</option> 
     <option>ram8</option> 
     <option>ram9</option> 
     <option>ram1</option> 
     <option>ram2</option> 
     <option>ram3</option> 
     <option>ram4</option> 
     <option>ram5</option> 
     <option>ram6</option> 
     <option>ram7</option> 
     <option>ram8</option> 
     <option>ram9</option> 
     <option>ram1</option> 
     <option>ram2</option> 
     <option>ram3</option> 
     <option>ram4</option> 
     <option>ram5</option> 
     </select> 

     </body> 
     <script> 
      $('#slr').scroll(function() { 
      //Its 90 px far from reaching the bottom you can adjust its value its depend on scroller size and scrollers size is depend on how much data you are showing 
      if(($(this)[0].scrollHeight-$(this).scrollTop())<=90) 
      { 
     //you can call you ajax function here and add value in innerhtml of select tag 
     alert($(this)[0].scrollHeight); 

      } 

     }); 
     </script> 
     </html> 
+0

cela fonctionne bien, sauf que la liste ouverte ne recouvre pas comme le comportement par défaut de zone de liste déroulante est attendue. Peux-tu le réparer? –

+0

Comme vous l'avez déjà mentionné dans votre question, vous souhaitez charger les données dans la liste déroulante quand il est atteint en bas et que je vous ai montré la démo via l'alerte d'un message. son message confus parce que toujours alerte, mais quand vous supprimez le message d'alerte et récupérer des données sur défiler vers le bas chaque fois que les données récupérées défilent la taille sera augmentée et la prochaine fois récupérée sera appelée lorsque l'utilisateur a vraiment défilé. parce que les données ne sont pas augmentées, donc son alerte à tout moment. chaque fois que quelqu'un clique en dehors de la liste déroulante, il se cache automatiquement comme une liste déroulante normale. ou vous pouvez également cliquer quelque part par programme. juste commentaire alerte –

+0

créer une variable javascript et chaque fois lui donner une valeur lorsque vous faites une demande (processus) et changer sa valeur lorsque la demande terminée avec succès (comp) et 1 plus de valeur quand leur est plus de données pour aller chercher (pas plus). quand vous allez faire une requête, vérifiez la valeur des variables si sa valeur est "comp", puis allez-y sinon arrêtez le programme. –