[AJAX] Recherche intuitive en Php

Version imprimable

28/12/2007, 15h44
Kami81

[AJAX] Recherche intuitive en Php

Bonjour tout le monde.

Je voudrais avoir une aide pour pouvoir effectué une recherche intuitive en php. En gros je tappe une lettre et j'ai tout les noms qui corresponde à une lettre qui s'affiche sur une liste à côté de mon champ de saisie.

Merci de bien vouloir m'aidé.
28/12/2007, 15h53
RideKick

Il va falloir utiliser Ajax , ce n'est pas possible en PHP sans recharger la page !
28/12/2007, 16h20
Kami81

Ah Ok. Tu connais des site ou il y a de bonne explication sur AJAX car je l'ai jamais utilisé et j'aimerais réalisé ce que je demande.

Merci de ta réponse aussi rapide
28/12/2007, 16h25
RideKick

Rubrique cours AJAX de DVP :king:
28/12/2007, 16h28
Kami81

Merci. En fait ma recherche intuitive je l'ai faite en javascript mais il me faut me connecté à une base de données et j'avais oublié que le javascript était un language qui s'exécute du côté client. Avec ajax c'est possible de se connecter à une base de données ?
28/12/2007, 16h31
RideKick

tout a fait , une méthode simple consiste a créer un fichier PHP dans lequel tu fais ton traitement avec ta base de données , qui te renvoi tes lignes par exemple et de l'appeler avec une fonction Ajax !

Tu devrais trouver des exemples dans le lien que je t ai donné !
28/12/2007, 16h37
Kami81

Merci pour les infos. Je vais m'y mettre alors et voir ce que ça va donné. Je te dirais une fois finit.

Merci beaucoup de ton aide maintenant je sais comment m'y prendre.
04/01/2008, 10h18
Laurelaie

Bonjour,

Voila, je veux faire a peu près la même chose! Je sais comment m'y prendre pour récupérer les valeurs mais je ne sais pas quoi mettre comme balise...

Ce que je veux en fait c'est un input texte et lorsque je saisi des caractères avoir une sorte de liste déroutante collé a cet input. Est ce qu'il y a une balise spécial qui fait ça??? Sinon comment je pourrais faire?? Est e que quelqu'un aurait un exemple autrement??

Merci de votre aide...

Solution

Voila, après quelques heures de recherche et de réflexion... j'ai trouvé une solution! J'affiche un input text et juste en dessous une div dans lequel j'affiche la liste des resultats.

Si ca interesse quelqu'un je laisse le code, de meme si vous avez des commentaires ou améliorations, n'hésitez pas!

test.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="JavaScript" type="text/javascript" src="includes/fonctions.js"></script>
<form name="form_ville" action="" method="post">
	<table width="100%">
		<tr>
			<th>Région</th>
			<td><input style="width:220px;" type="text" name="ville" value="" onkeyup="if(this.value.length>=3) { recherche_ville(this.value); } else { document.getElementById('resultat').style.display='none'; }" /></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><div id="resultat"></div></td>
		</tr>
	</table>
</form>

style.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#resultat
{
	border:1px solid #7F9DB9;
	width:220px;
	overflow-y:auto;
	overflow-x:none;
	height:150px;
	display:none;
	color:000;
	font-size:11px;
}
a.lien_recherche:hover
{
	background:#dedede;
	cursor:pointer;
}

fontions.js

// JavaScript Document

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
 
var url; 
var moz = (document.implementation && document.implementation.createDocument); 
var ie = (window.ActiveXObject);
 
/*fonction qui ecrit dans une div*/
function writediv(nom_div, texte)
{
	document.getElementById(nom_div).innerHTML = texte;
}
 
function recherche_ville(valeur)
{
	if(valeur.length>=3)
	{
		var xmlhttp = null;
		if (moz)
		{
			var xmlhttp = new XMLHttpRequest();
		}
		else if (ie)
		{
			var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
 
		if (!xmlhttp && typeof XMLHttpRequest!='undefined')
		{
			xmlhttp = new XMLHttpRequest();
		}
 
		xmlhttp.open('GET', 'ajax_ville.php?recherche='+escape(valeur), false);
		xmlhttp.setRequestHeader('User-Agent', 'Affichage recherche');
		xmlhttp.setRequestHeader('Accept', 'text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.7,*/*;q=0.1');
		xmlhttp.send(null);
 
		if(xmlhttp.status == 200)
		{
			var liste1 = xmlhttp.responseXML.getElementsByTagName('nom_ville');
			document.getElementById('resultat').style.display='block';
 
			if(liste1.length==0)
			{
				writediv('resultat', "Aucun résultat...");
			}
			else
			{
				var resultat="";
				for(var i = 0, m = liste1.length; i < m; i++)
				{
					var rech_val0=liste1[i].firstChild.nodeValue;
					valeur2=valeur.charAt(0).toUpperCase()+valeur.slice(1);
					rech_val=rech_val0.replace(valeur, '<b>'+valeur+'</b>');
					rech_val=rech_val.replace(valeur2, '<b>'+valeur2+'</b>');
 
					if(resultat!='' && rech_val!='')
					{
						resultat=resultat+'<br />';
					}
					resultat=resultat+'<a onclick="clic_valeur(\''+rech_val0+'\')" class="lien_recherche">'+rech_val+'</a>';
				}	
				writediv('resultat', resultat);
			}
		}
	}
}
 
function clic_valeur(valeur)
{
	document.getElementById('resultat').style.display='none';
	document.form_ville.ville.value=valeur;
}

ajax_ville.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?
include("includes/config.php");/*connexion bdd*/
?>
<? header('Content-Type: text/xml'); ?>
<?
$valeur=$_GET['recherche'];
 
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><recherche>\n";
 
$req_ville="SELECT * FROM ville WHERE nom LIKE '%".ltrim(rtrim($valeur))."%' ORDER BY nom";
$result_ville=mysql_query($req_ville);
 
while($rows_ville=mysql_fetch_array($result_ville))
{
	$inf .= "<nom_ville>".ltrim(rtrim($rows_ville['nom']))."</nom_ville>\n";
}
$inf .= "</recherche>";
echo $inf;

Merci pour ton exemple. Moi j'ai trouvé une autre solution et je la met pour quelque personne si ils en cherchent d'autre.

Mon code Javascript :

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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
var liveSearchReq = false;
var t = null;
var liveSearchLast = "";
 
var isIE = false;
// on !IE we only have to initialize it once
if (window.XMLHttpRequest) {
	liveSearchReq = new XMLHttpRequest();
}
 
 
 
 
 
 
function liveSearchInit() {
 
	if (navigator.userAgent.indexOf("Safari") > 0) {
		document.getElementById('livesearch').addEventListener("keydown",liveSearchKeyPress,false);
//		document.getElementById('livesearch').addEventListener("blur",liveSearchHide,false);
	} else if (navigator.product == "Gecko") {
 
		document.getElementById('livesearch').addEventListener("keypress",liveSearchKeyPress,false);
		document.getElementById('livesearch').addEventListener("blur",liveSearchHideDelayed,false);
 
	} else {
		document.getElementById('livesearch').attachEvent('onkeydown',liveSearchKeyPress);
//		document.getElementById('livesearch').attachEvent("onblur",liveSearchHide,false);
		isIE = true;
	}
 
	document.getElementById('livesearch').setAttribute("autocomplete","off");
 
}
 
function liveSearchHideDelayed() {
	window.setTimeout("liveSearchHide()",400);
}
 
function liveSearchHide() {
	document.getElementById("LSResult").style.display = "none";
	var highlight = document.getElementById("LSHighlight");
	if (highlight) {
		highlight.removeAttribute("id");
	}
}
 
function liveSearchKeyPress(event) {
	if (event.keyCode == 40 )
	//KEY DOWN
	{
		highlight = document.getElementById("LSHighlight");
		if (!highlight) {
			highlight = document.getElementById("LSShadow").firstChild.firstChild;
		} else {
			highlight.removeAttribute("id");
			highlight = highlight.nextSibling;
		}
		if (highlight) {
			highlight.setAttribute("id","LSHighlight");
		} 
		if (!isIE) { event.preventDefault(); }
	} 
	//KEY UP
	else if (event.keyCode == 38 ) {
		highlight = document.getElementById("LSHighlight");
		if (!highlight) {
			highlight = document.getElementById("LSResult").firstChild.firstChild.lastChild;
		} 
		else {
			highlight.removeAttribute("id");
			highlight = highlight.previousSibling;
		}
		if (highlight) {
				highlight.setAttribute("id","LSHighlight");
		}
		if (!isIE) { event.preventDefault(); }
	} 
	//ESC
	else if (event.keyCode == 27) {
		highlight = document.getElementById("LSHighlight");
		if (highlight) {
			highlight.removeAttribute("id");
		}
		document.getElementById("LSResult").style.display = "none";
	} 
	//BACKSPACE - required for IE
	else if (event.keyCode == 8 && isIE) {
		liveSearchStart();
	}
 
	//RETURN
	else if (event.keyCode == 13 ) {
		return liveSearchSubmit();
	}
 
 
}
function liveSearchStart() {
	if (t) {
		window.clearTimeout(t);
	}
	t = window.setTimeout("liveSearchDoSearch()",200);
}
 
function liveSearchDoSearch() {
 
	if (typeof liveSearchRoot == "undefined") {
		liveSearchRoot = "";
	}
	if (typeof liveSearchRootSubDir == "undefined") {
		liveSearchRootSubDir = "";
	}
	if (typeof liveSearchParams == "undefined") {
		liveSearchParams2 = "";
	} else {
		liveSearchParams2 = "&" + liveSearchParams;
	}
	if (liveSearchLast != document.forms.form1.q.value) {
	if (liveSearchReq && liveSearchReq.readyState < 4) {
		liveSearchReq.abort();
	}
	if ( document.forms.form1.q.value == "") {
		liveSearchHide();
		liveSearchLast = "";
		return false;
	}
	if (window.XMLHttpRequest) {
	// branch for IE/Windows ActiveX version
	} else if (window.ActiveXObject) {
		liveSearchReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
	liveSearchReq.open("GET", liveSearchRoot + "/villes/rech_nom.php?q=" + document.forms.form1.q.value + liveSearchParams2);
	liveSearchLast = document.forms.form1.q.value;
	liveSearchReq.send(null);
	}
}
 
function liveSearchProcessReqChange() {
 
	if (liveSearchReq.readyState == 4) {
		var  res = document.getElementById("LSResult");
		res.style.display = "block";
		var  sh = document.getElementById("LSShadow");
 
		sh.innerHTML = liveSearchReq.responseText;
 
	}
}
 
function liveSearchSubmit() {
	var highlight = document.getElementById("LSHighlight");
	if (highlight && highlight.firstChild) {
		window.location =highlight.firstChild.nextSibling.getAttribute("href");
		return false;
	} 
	else {
		return true;
	}
}
 
 
 
 
/* preview comment code */
 
 
function preview(request){
    //
    var previewNode = $('previewComment');
 
    if (!previewNode) {
        var lastComment = $('bx_foo');
        var previewNode = document.createElement("div");
        previewNode.id = 'previewComment';
        previewNode.className = 'post_content';
        previewNode = lastComment.parentNode.insertBefore(previewNode,lastComment.nextSibling);
 
    }
    previewNode.innerHTML = request.responseText;
}
 
 
function previewSubmit(test) {
    var name = document.getElementById('name').value;
    var text = document.forms['bx_foo']['comments'].value;
 
    var f = document.forms['commentForm'];
	if (typeof liveSearchRoot == "undefined") {
		var liveSearchRoot = "/";
	}
 
    body = "text="+ encodeURIComponent(text) + "&name="+ encodeURIComponent(name);
    new ajax (liveSearchRoot + 'inc/bx/php/preview.php', {
        postBody: body,
                method: 'post',
                onComplete: preview
    });
 
 
    return false;
}

Ma page php qui utilise ce fichier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html><body onload='liveSearchInit();'><tr><td width=10% align='left'>Nom :</td><td width=20%><input id="livesearch" name="q" type=text size=20 onkeypress="liveSearchStart();" <?php echo "value=$nom"?> ></td></tr>
<tr><td width=10% align='left'></td><td width=20%><div id="LSResult" style="display: none;"><div id="LSShadow"></div></div></td><td width=10% align='left'></td><td></td></tr>
<?php
echo "</tr>";
echo "<tr><td colspan=2><hr></td></tr>";
echo "<tr><td align='center' colspan=2><INPUT TYPE=reset NAME=reset VALUE=Annuler>&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE=submit NAME=valider id=valider VALUE=Valider></td>";
echo "</tr>";
echo "</table></form>";
}
}
}
?></body></html>

Voici enfin la page php avec la requête sql :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
 
     //connexion à la base de données.
     mysql_connect("localhost","mdj_osc","mdj854\$hj");
     mysql_select_db("osc_mdj");
     
 
     $recherche=$_GET['q'];
     $req="select distinct nom from new_contacts where nom LIKE '$recherche%' ORDER BY nom";
     $res=mysql_query($req) or die ("Erreur dans la requête $req");
     
     if ($res) {
  while ($row = mysql_fetch_row($res)) {
    echo "<a href='/villes/index2.php?page=19&p=$row[0]'>$row[0]</a><br />";
 
    }
  }
  
mysql_close();
?>

Voilà une autre solution. :D

16/09/2009, 18h02
klass

Bonjour à tous !

je viens de me servir de la premiere solution proposée
elle marche tres bien mais je voudrais une fois la liste de proposition afficher, pouvoir selectionner une proposition avec les fleches du clavier
je n'arrive pas à trouver la solution

j'espere avoir des reponses meme si ce sujet à 1an :?

merci

Nico