[AJAX] Autocompletion et Module Perso
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:
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:
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 </TD>\n");
print("<TD align=\"Center\">$item_Sex</TD>\n");
print("<TD>$item_Nom </TD>\n");
print("<TD>$item_Nom_jeune_fille </TD>\n");
print("<TD>$item_Prenom </TD>\n");
print("<TD align=\"Center\">$item_Tel_bureau </TD>\n");
print("<TD>$item_Adr_prof </TD>\n");
print("<TD align=\"Center\">$item_Bureau_distrib </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:
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)
