salut à tous,
 
j'ai une page web qui permet de faire une recherche de ville soit en passant le code postal, soit en passant le nom.
l'affichage des villes est dans une balise select.
 
le problème, c'est que lors de recherche de ville avec des noms long (ex : saint martin du fion), le navigateur se bloque pendant une seconde ou deux, donc par exemple,
si j'écris dans ma zone de texte "sain", il me renvoit toutes les villes commençant par ces lettres mais je suis obligé d'attendre avant de pouvoir écrire le "t", puis l'espace, etc...
plus on se rapproche de la fin du nom, plus c'est rapide...
 
j'avais pensé au xhr(abort), mais ça fait pas comme je veux, ça me bloque quand même...
 
existe t'il une fonction permettant de ne pas bloquer et que je puisse continuer d'écrire le nom de la ville ?
 
Merci

c'est bizarre, le 1er A de AJAX voulant dire "asynchrone", ca devrait pas bloquer ton navigateur... c'est quoi ton code?

voici mon code javascript !!
 
soyez mignon, c'est mon premier    
 
function affichageville(cp)
{
 if(cp != '')
 {
  if (cp.length>2)
  {
   
   
   selville = document.getElementById('ville');
   for (a=0; a<selville.options.length; a++)
   {
    selville.options[a] = null;
    a=0;
   }
   cp=cp+"%";
   if(texte = file('ajaxville.php?cp='+escape(cp)))
   {
     var reg=new RegExp("[;.]+", "g" );
   
     var tableau=texte.split(reg);
   
     selville = document.getElementById('ville');
     var j= 0;
     for (var i=0; i<tableau.length; i++)
     {
      if (tableau[i] != "" )
       {selville.options[j] = new Option(tableau[i+1] + " (" +tableau[i+2]+" )", tableau[i]);}
      i=i+2;
      j=j+1;
     }
     
   }
  }
 }
}

la functon file s'il te plait
tu fais de l'Ajax en synchrone, alors qu'il faut le faire en asynchrone :

merci, de me répondre et désoler d'avoir oublier cette fonction
 
function file(fichier)
{
 if(window.XMLHttpRequest) // FIREFOX
  xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
  else
  return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4)  
 return(xhr_object.responseText);
else return(false);
}
 
j'ai vu que j'étais en mode synchrone, donc je me suis mis en mode asynchrone.
 
par contre la mise à jour du select ne se fait plus...
 
voici le code html tant qu'on y est  
 
<input id="cp" name="cp" type="text" onKeyup="affichageville(this.value)">
<select id="ville" name="ville"></select>

Bah, ouais, parce qu'il faut utiliser le champ onreadystatechange de l'objet XMLHttpRequest pour être notifié de manière ... asynchrone.

Bon, j'ai corrigé ma fonction file
 
function file(fichier)
{
 if(window.XMLHttpRequest) // FIREFOX
  xhr_object = new XMLHttpRequest();
 else if(window.ActiveXObject) // IE
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
  else
  return(false);
xhr_object.open("GET", fichier, true);
xhr_object.send(null);
xhr_object.onreadystatechange = function()  
 {
  if (xhr_object.readyState == 4 && (xhr_object.status == 200 || xhr_object.status == 0))  
  {
   return(xhr_object.responseText);
  }
  else return(false);
 }
}
 
mais ça marche pas mieux, je suis ultra débutant dedans... C'est sympa de m'aider

Hmm, nan, va falloir revoir la logique de ta fonction affichageville. En fait le traitement sur ton select devra se faire dans ton callback onreadystatechange. En mode asynchrone, lorsque tu appelles "send()", la fonction ne s'arrête pas, ce qui fait que retourner une valeur depuis le callback, ça n'a aucun intérêt.

Ah ouais, et mieux vaut assigner le champ onreadystatechange avant d'appeler send().

ok, bon j'ai refait mes fonctions, ça fonctionne bien, ça ne bloque plus le navigateur, voici les fonctions :
 
function getXMLHttpRequest()
{
 var xhr = null;
 
 if (window.XMLHttpRequest || window.ActiveXObject)  
 {
  if (window.ActiveXObject)  
  {
   try  
   {
    xhr = new ActiveXObject("Msxml2.XMLHTTP" );
   } catch(e)  
   {
    xhr = new ActiveXObject("Microsoft.XMLHTTP" );
   }
  }  
  else  
  {
   xhr = new XMLHttpRequest();  
  }
 }
 else  
 {
  alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..." );
  return null;
 }
 return xhr;
}
 
 
function requete(zipcode)
{
 var xhr_object = getXMLHttpRequest();
 cp = zipcode;
 
 if(cp != '')
 {
  if (cp.length>2)
  {
   cp=cp+"%";
   xhr_object.onreadystatechange = function()  
   {
    if (xhr_object.readyState == 4 && (xhr_object.status == 200 || xhr_object.status == 0))  
    {
     affichageville(xhr_object.responseText);
    }
    else return(false);
   }
   xhr_object.open("GET", 'ajaxville.php?cp='+cp, true);
   xhr_object.send(null);
  }
 }
}
 
 
function affichageville(ville)
{
 selville = document.getElementById('ville');
 for (a=0; a<selville.options.length; a++)
 {
  selville.options[a] = null;
  a=0;
 }
   
 texte = ville;
 var reg=new RegExp("[;.]+", "g" );
 
 var tableau=texte.split(reg);
   
 selville = document.getElementById('ville');
 var j= 0;
 for (var i=0; i<tableau.length; i++)
 {
  if (tableau[i] != "" )
  {
   selville.options[j] = new Option(tableau[i+1] + " (" +tableau[i+2]+" )", tableau[i]);
  }
  i=i+2;
  j=j+1;
 }
}
 
en tout cas, merci pour m'avoir aider à résoudre mon problème...    
 
Bon maintenant dans ce code, voyez-vous des choses qui vous choquent, qui ne font pas partie des standards javascript ou autre, ou des fonctions qui pourraient être allégés en termes de codages ??
 
Merci

 
La fonction affichageVille pourrait être légèrement simplifiée en :

function affichageville(ville)
{
    var selville = document.getElementById('ville')
    var reg      = new RegExp("[;.]+", "g" )
    var tableau  = ville.split(reg)
 
    while (selville.options.length > 0)
        selville.remove(0)
 
    for (var i = 0; i < tableau.length; i += 3)
    {
        if (tableau[i] != "" )
            selville.add(new Option(tableau[i+1] + " (" +tableau[i+2]+" )", tableau[i]), null)
    }
}

Merci à toi