[AJAX] Autocompletion et Module Perso

**javaboy** · 20/02/2007, 12h42

Bonjour,

J'ai suivi l'excellent tuto autocompletion qui est une merveille , je l'ai adapter à mes besoins et essayer de faire mon propre module .Avant autocompletion fonctionnait maintenant il ne fonctionne plus pourtant je n'ai absolument rien changé :
Code autocompletion

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
unction getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}
 
var _documentForm=null; // le formulaire contenant notre champ texte
var _inputField=null; // le champ texte lui-même
var _submitButton=null; // le bouton submit de notre formulaire
 
function initAutoComplete(form,field,submit){
  _documentForm=form;
  _inputField=field;
  _submitButton=submit;
  _inputField.autocomplete="off";
  creeAutocompletionDiv();
  _currentInputFieldValue=_inputField.value;
  _oldInputFieldValue=_currentInputFieldValue;
  cacheResults("",new Array())
  document.onkeydown=onKeyDownHandler;
  _inputField.onkeyup=onKeyUpHandler;
  _inputField.onblur=onBlurHandler;
  window.onresize=onResizeHandler;
  // Premier déclenchement de la fonction dans 100 millisecondes
  setTimeout("mainLoop()",100)
}
 
var _oldInputFieldValue=""; // valeur précédente du champ texte
var _currentInputFieldValue=""; // valeur actuelle du champ texte
var _resultCache=new Object(); // mécanisme de cache des requetes
 
// tourne en permanence pour suggerer suite à un changement du champ texte
function mainLoop(){
  if(_oldInputFieldValue!=_currentInputFieldValue){
    var valeur=escapeURI(_currentInputFieldValue);
    var suggestions=_resultCache[_currentInputFieldValue];
    if(suggestions){ // la réponse était encore dans le cache
      metsEnPlace(valeur,suggestions)
    }else{
      callSuggestions(valeur) // appel distant
    }
    _inputField.focus()
  }
  _oldInputFieldValue=_currentInputFieldValue;
  setTimeout("mainLoop()",100); // la fonction se redéclenchera dans 100 ms
  return true
}
 
// echappe les caractère spéciaux
function escapeURI(La){
  if(encodeURIComponent) {
    return encodeURIComponent(La);
  }
  if(escape) {
    return escape(La)
  }
}
 
var _xmlHttp = null; //l'objet xmlHttpRequest utilisé pour contacter le serveur
var _adresseRecherche = "_layout/options.php" //l'adresse à interroger pour trouver les suggestions
 
function callSuggestions(valeur){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  _xmlHttp=getXMLHTTP();
  if(_xmlHttp){
    // appel à l'url distante 
    _xmlHttp.open("GET",_adresseRecherche+"?debut="+valeur,true);
    _xmlHttp.onreadystatechange=function() {
      if(_xmlHttp.readyState==4&&_xmlHttp.responseXML) {
        var liste = traiteXmlSuggestions(_xmlHttp.responseXML)
        cacheResults(valeur,liste)
        metsEnPlace(valeur,liste)
      }
    };
    // envoi de la requete
    _xmlHttp.send(null)
  }
}
[ETC le reste et pour le style et la gestion des évenement des touches]

Voici un partie de mon code qui fait appel à l'autocompletion

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!-- Javascript permettant l'auto completion de la liste nom -->
<script type="text/javascript" src="_scripts/autocomplete.js"></script>
<script type="text/javascript">
	window.onload = function ()
		{
			initAutoComplete(document.getElementById('formulaire'),document.getElementById('champ_Nom'),document.getElementById('bouton_submit'))
		};

	</script>
	
<!--Listes de choix par auto completion -->
	<form name="formulaire" id="formulaire" style="margin-left: 50px; margin-top:20px">
		<input type="text" name="champ_Nom" id="champ_Nom"size="20" autocomplete="off"/>
		<input type="submit" id="bouton_submit">
	</form>
<hr /><br />	

<?PHP
//Données de l'uitlisateur
require("users_info.php");
//Si champ_Nom n'existe pas dans l'url on met la variable a blanc sinon une erreur se produit à la 1 ére ouverture  de la page requete.php
if(empty($_GET['champ_Nom']))
{
	$_GET['champ_Nom'] = "";
}

//Creation de la variable nom pour le module get de l'implementation ajax
$search_nom=($_GET['champ_Nom']);

// Connexion au serveur
	mysql_connect($sql_serveur,$sql_user,$sql_passwd);
	mysql_select_db($sql_table);

// Creation et envoi de la requete en fonction de ce que contient la variable "$_GET ['champ_Nom']
if ($search_nom == "")
{
	$req = "SELECT * FROM ".$serveur."_".$sql_table." where Etablissement like '$_group' order by nom ";
	$res = mysql_query($req ) or die("Requete Impossible2: " . mysql_error());
}
else
{
	echo ("Recherche exécutée sur : $search_nom");
	echo ("<br/>");
	$req = "SELECT * FROM ".$serveur."_".$sql_table." where nom like  '$search_nom'";
	$res = mysql_query($req ) or die("Requete Impossible: " . mysql_error());
}

//Comptage et affichage des resultats
	$row = mysql_num_rows($res);
	print("<br />");
//Gestion d'erreur dans le cas ou la recherche n'abouti à rien 
if ($row == "0")
{
	echo "<script language='Javascript'>";
	echo "<!--\n";
	echo "alert(\"Votre recherche sur l'utilisateur $search_nom  n'a retournée aucun resultat veuillez vérifier le nom de l'utilisteur\");\n";
	echo "// -->";
	echo "</script>\n";
	echo "Il n'y a aucune entrée qui porte ce nom";
	die;
	
}
else
	echo 'Il y a '.$row.' enregistrement(s) dans la table Clients.';
?>

<!-- Entete du tableau-->
	<br />
	<br />
	
	<Table border="1" bgcolor="#B2BDD8" cellpadding="10">
		<TR BGCOLOR="#f5f5dc" >
			<TH>Etablissement</TH>
			<TH>Sex</TH>
			<TH>Nom</TH>
			<TH style='width:93px'>Nom de jeune fille</TH>
			<TH>Prénom</TH>
			<TH>Tel bureau</TH>
			<TH>Adresse prof</TH>
			<TH>Bureau distributeur</TH>
			<TH>Etat</TH>
			<TH>KEY</TH>
		</TR>


<!--Remplisage des champs de la table -->
<?PHP
//Appel au javascript qui permet de faire la modification de l'etat	
print("<script type='text/javascript' src='_scripts/change_etat.js'></script>");
while($row = mysql_fetch_row($res))
	{
		$item_key = $row[0];
		$item_Etablissement = $row[1];
		$item_Sex = $row[2];
		$item_Nom = $row[3];
		$item_Nom_jeune_fille = $row[4];
		$item_Prenom = $row[5];
		$item_Tel_bureau = $row[8];
		$item_Adr_prof = $row[9];
		$item_Bureau_distrib = $row[14];
		$item_Date_entre_ent = $row[15];
		$item_Autorise = $row[16];
	
		print("<TD>$item_Etablissement&nbsp</TD>\n");
		print("<TD align=\"Center\">$item_Sex</TD>\n");
		print("<TD>$item_Nom&nbsp</TD>\n");
		print("<TD>$item_Nom_jeune_fille&nbsp</TD>\n");
		print("<TD>$item_Prenom&nbsp</TD>\n");
		print("<TD align=\"Center\">$item_Tel_bureau&nbsp</TD>\n");
		print("<TD>$item_Adr_prof&nbsp</TD>\n");
		print("<TD align=\"Center\">$item_Bureau_distrib&nbsp</TD>\n");	
		print("<TD align='Center'>");
		print("<div id='etat_$item_key'>");
		
		if ($item_Autorise == "O")			
		{	
			print("<img name='img_$item_key' src='_pics/chek.png' border='0' title=\"Activer désactiver l'utilisateur $item_Nom\" id='submit_$item_key' onclick='Supp($item_key)'/>");
		}
		else
		{	
			print("<img name='img_$item_key' src='_pics/faux.png' border='0' title=\"Activer désactiver l'utilisateur $item_Nom\" id='submit_$item_key' onclick='Auto($item_key)'/>");
		}
		print("</div>");
		print("</TD>");
		print("<TD align=\"Center\">$item_key</TD>");
		print("</TR>\n");
		
	}

Et enfin mon code js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function Supp(id) 
{	
	document.images["img_"+id].src ='_pics/faux.png';
	var url = "suppr.php?id=" + id ;
	Request(url,id);	
}
function Auto(id) 
{
	document.images["img_"+id].src='_pics/chek.png';
	var url = "autorise.php?id=" + id ; 
	Request(url,id);	
}
 
function Request(url,id)
{
 
	if (window.XMLHttpRequest) 
	{ // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) 
			{http_request.overrideMimeType('text/xml');}
	} 
		else if (window.ActiveXObject) 
		{ // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){}
		}
	}
 
	if (!http_request) 
	{
		alert('Abandon :( Impossible de créer une instance XMLHTTP');
		return false;
	}
	http_request.onreadystatechange = function() { alertContents(http_request,id); };
	http_request.open('GET', url, true);
	http_request.send(null);
 
}
 
function alertContents(http_request,id) 
{
	if (http_request.readyState == 4) 
	{
		if (http_request.status == 200)
		{
			document.getElementById('etat_'+id).innerHTML += http_request.responseText;
		}
		else 
			{alert('Un problème est survenu avec la requête.');	}
	}
}

Ma question est la suivante :
Est-ce que le fait de faire appel a 2 javascript via 2 formulaire dans la même page ne gêne en rien ? Et pourquoi mon autocompletion ne fonctionne plus

Merci de votre aide car la je bloque un peu (Novice en AJax)

**javaboy** · 27/02/2007, 17h05

Personne ??? Je suis toujour dans l'intérogation .

[AJAX] Autocompletion et Module Perso

JavaScript

Vue hybride

Discussions similaires

Partager

Partager