Discussion :

[bertrantitude]

bonjour,

j'aimerai faire un champ de type texte en autocomplétion, ce qui veut dire que lorsqu'un utilisateur entrera les premières lettres d'un nom, il aura toute une série de proposition. Mais ça ne fonctionne pas. Je me heurte à un "requête interdite". Je ne vois pas la raison... .

Voici le fichier "autocompletion_ajax.php":

Code php :

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
<?php
$check = array(
	'fonction' => array('patient')
);
 
//Connexion à la base de données
@mysql_connect('localhost', 'root', '***') or die('Connexion à la base de données impossible');
@mysql_select_db('fonction') or die('base de données inexistante');
 
$table = (isset($_GET['patient']) ? $_GET['patient'] : '');
$field = (isset($_GET['nom']) ? $_GET['nom'] : '');
$search = (isset($_GET['nom']) ? $_GET['nom'] : '');
 
if(isset($check[$table]) && in_array($field, $check[$table])){ 
	if($table && $field && $search){
		$search = strtolower(mysql_escape_string($search));
 
		header("content-type: application/xml");
		echo '<?xml version="1.0" encoding="iso-8859-1" ?>';
		echo '<suggests>';
 
		$query = 'SELECT `'.$field.'` FROM `'.$table.'` WHERE lower(`'.$field.'`) LIKE "'.$search.'%" ORDER BY `'.$field.'`';
		$result = mysql_query($query);
		while($row = mysql_fetch_array($result)){
			echo '	<suggest>'.$row[$field].'</suggest>';
		}
		echo '</suggests>';
	}
}
else{
	die('Requête interdite');
}
?>

le code html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
  <form method="post" action="repos.php">
   <p>
       <label for="nom">Nom :</label>
 
	  <input name="nom" type="text" autocomplete="off" onKeyUp="suggest(this, 'fonction', 'patient');" />
	  <?php include 'autocomplete_ajax.php'?>
 
        <input type="submit" value="Valider" /> 
    <?php $nom = $_POST['nom'];?> 
 
   </p>
</form>

et voici le fichier 'autocomplete.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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
var value_suggested = ''; //On stock la value du champ de texte pour éviter de refaire le processus si la valeur n'a pas changé (appuyé sur une touche autre que caractère)
function suggest(element, table, field){
	//Détection du navigateur
	var is_ie = ((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1));
 
	/*Fonction utile : détermine la position absolue exacte d'un objet sur la page*/
	findPos = function(obj){
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curleft,curtop];
	}	
 
	//Création de la liste des propositions si elle n'existe pas encore
	if(!document.getElementById('suggestsList')){
		var suggestsList = document.createElement('ul');
		suggestsList.id = 'suggestsList';
 
		/*On donne à la liste la même largeur que le champ de texte => on doit récupérer sa largeur et son padding*/
		var style = (!is_ie ? window.getComputedStyle(element, null) : element.currentStyle); //Récupération du style
		if(style.width){
			var width = parseInt(style.width.replace(/px/, '')); //On transforme la largeur dans le style en int
 
			//On récupère le padding éventuel du champ pour le rajouter à la largeur à attribuer à la liste
			var paddingRight = (style.paddingRight ? style.paddingRight : false);
			if(paddingRight){
				paddingRight = parseInt(paddingRight.replace(/px/, ''));
				width += paddingRight;
			}
 
			var paddingLeft = (style.paddingLeft ? style.paddingLeft : false);
			if(paddingLeft){
				paddingLeft = parseInt(paddingLeft.replace(/px/, ''));
				width += paddingLeft;
			}
 
			width = (isNaN(width) ? 150 : width);
			suggestsList.style.width = width+'px'; //On donne à la liste la même largeur que celle du champ de texte
		}
 
		//On positionne la liste sous le champ
		suggestsList.style.position = 'absolute';
		var coord = findPos(element); //Récupération des coordonnées du champ
		suggestsList.style.left = coord[0]+'px';
		suggestsList.style.top = coord[1]+(19)+'px'; //On ajoute 19px de haut pour que la liste soit sur le champ et non par-dessus
		document.body.appendChild(suggestsList); //On insère la liste dans le document
	}
	else{
		//Si la liste existe déjà, on se contente de la repérer par rapport à son id
		suggestsList = document.getElementById('suggestsList');
	}
	//Si la valeur a changée, on masque la liste, le temps d'actualiser son contenu
	if(element.value != value_suggested){
		suggestsList.style.display = 'none';
	}
 
	//Fonction servant à cacher les suggestions
	closeSuggest = function(nofocus){
		var todelete = document.createElement('div');
		todelete.appendChild(suggestsList);
		if(!nofocus){ element.focus(); }
	};
 
	//Fonction gérant le parcour des éléments à l'aide des touches directionnelles
	selectSuggest = function(direction){
		//On regarde si un élément est selectionné
		var selected = -1;
		var lis = suggestsList.getElementsByTagName('li');
		for(i=0; i<lis.length; i++){
			if(lis[i].id == 'selectedSuggest'){
				selected = i;
			}
			lis[i].id = '';
		}
 
		selected += direction;
		selected = (selected < -1 ? (lis.length-1) : selected);
		if(selected >= 0 && selected < lis.length){
			lis[selected].id = 'selectedSuggest';
		}
	};
 
	//Remplit le champ avec la suggestion sélectionnée
	useSelected = function(){
		//On regarde si un élément est selectionné
		var lis = suggestsList.getElementsByTagName('li');
		for(i=0; i<lis.length; i++){
			if(lis[i].id == 'selectedSuggest'){
				element.value = lis[i].firstChild.innerHTML;
			}
		}
		closeSuggest();
	};
 
	document.body.onkeyup = function(e){
		var key = (!is_ie ? e.keyCode : window.event.keyCode);
		switch(key){
			case 27: //Esc
				closeSuggest();
				break;
			case 9: //Tab
				closeSuggest(true); //On referme la liste sans redonner le focus au champ
				break;
			case 38: //Up
				selectSuggest(-1);
				break
			case 40: //Down
				selectSuggest(1);
				break;
			case 13: //Enter
				useSelected();
				break;
		}
	};
	document.body.onclick = function(){ closeSuggest(true); };
 
 
	if(element.value != '' && element.value != value_suggested){
		/*Récupération de la liste des suggestions*/
		var suggests = new Array();
 
	    var XHR = false; 
		try { XHR = new ActiveXObject("Microsoft.XMLHTTP"); }
		catch(e){ XHR = new XMLHttpRequest(); }
		//
		//Requête AJAX : attention à bien donner le chemin du fichier autocomplete_ajax.php
		XHR.open("GET", 'C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\data\localweb\projects\Nouveau dossier\autocomplete_ajax.php?table='+table+'&field='+field+'&search='+element.value+'&nocache='+Math.floor((new Date()).getTime()), true); //timestamp en parametre pour empecher la mise en cache
		// Attente de l'état 4 (-> OK)
		XHR.onreadystatechange = function () {
			// l'état est à 4, requête reçue
			if(XHR.readyState == 4){
				var xml = XHR.responseXML; //Récupération du xml contenant les suggestions
				var suggests_xml = xml.getElementsByTagName('suggest');
				for(i=0; i<suggests_xml.length; i++){
					//On remplit l'array des suggestions
					suggests[suggests.length] = suggests_xml[i].firstChild.data;
				}
 
				//On supprime l'ancien contenu de la liste des suggestions, puis on la remplit
				suggestsList.innerHTML = '';
				if(suggests.length){
					for(i=0; i<suggests.length; i++){
						var li = document.createElement('li');
						var a = document.createElement('a');
						a.innerHTML = suggests[i];
						//On ajoute un évènement sur le lien pour que son contenu soit mis dans le champ lorsque l'on clique dessus
						a.onclick = function(){
							element.value = this.innerHTML;
							closeSuggest();
						};
						li.appendChild(a);
						suggestsList.appendChild(li);
					}
					//Maintenant que la liste est remplie, on l'affiche
					suggestsList.style.display = '';
				}
				else{
					//S'il n'y a aucune suggestion correspondante, on cache la liste
					closeSuggest();
				}
			}
		}
		XHR.send(null);
	}
	else if(element.value == ''){
		//Si le champ est vide, on cache la liste
		closeSuggest();
	}
 
	//On enregistre la value pour laquelle le traitement a été effectuer pour ne pas le refaire s'il n'y a pas de changement
	value_suggested = element.value;
}

D'avance merci

[mathieu]

vous accédez au fichier en commençant par "C:\...", cela est un accès direct au fichier
or AJAX demande un accès par un serveur HTTP donc avec un URL commençant par "http://..."

[bertrantitude]

bonjour,


merci pour votre aide. Donc il faudrait que je mette déjà ma base de données en ligne et que je mette le lien vers la base de donnée? Il n'y a pas d'autre solution (sans rectifier trop le code)?

D'avance merci

[Doksuri]

pas oblige de le mettre en ligne, il y a toujours le chemin relatif

j'ai trouve cette explication des chemins relatifs/absolus qui me semble complete
desktop.arcgis.com/fr/arcmap/10.3/tools/supplement/pathnames-explained-absolute-relative-unc-and-url.htm

[ABCIWEB]

C'est le même type de chemin que pour afficher une image dans le html.

Pour un fichier situé à la racine du site et une image dans le dossier PHOTO situé lui aussi à la racine du site, l'adresse relative est <img src="PHOTO/mon_image.jpg">. Dans ce cas le navigateur se sert de l'url de la page affichée comme url de base.

A noter que si besoin tu peux modifier cette url de base qui sert à construire le chemin complet (chemin complet = url de base+chemin relatif) avec la balise html base. Utile par exemple pour ne pas avoir à modifier toutes les adresses internes si un fichier affichant du html doit être déplacé et n'a plus la même hiérarchie dans le répertoire des dossiers.