Synchroniser un formulaire avec une BDD MySQL

Bonjour à tous,

Je dois actuellement reprendre un vieux site web reposant sur un système WAMP.

Dans ce nouveau site, je dois créer un formulaire, qui comprend une textarea classique parmi tant d'autres.

Problème, j'aimerai que lorsque l'utilisateur tape le nom de famille ou le prénom de la personne dans celle ci, il y est la possibilité une fois le nom valider , d'aller chercher dans une base de donnée MySQL la fonction de cette personne, pour savoir quoi lui afficher ensuite (car l'affichage dépend de la fonction occupée).

Et si possible, un petit must, un genre d'auto-complétion à la youtube ou google suggest qui interroge cette même base au fer et à mesure de la saisie pour proposer l'orthographe exact de la personne.

Je vais essayer de rester en PHP et à la limite Ajax pour ce projet.

Merci de me dire ce que vous en pensez et surtout comment le faire ? (partie du code)

Merci beaucoup et bonne journée :).

Salut,

Moi j'ai procédé comme indiqué dans un tuto intitulé Un moteur de recherche dynamique avec HTTP Request. Google it!
Un index Fulltext est une bonne solution pour ce qui est de la base de données.

Hum oui ok je note merci de ta réponse !!

Je vais voir cela. Tu aurais un exemple pour me montrer? Vu que tu dis que tu l'as déjà fait?

Je ne comprends pas quand tu parles d'index Fulltext, tu peux m'en dire plus s'il te plait?

Merci en tout cas :)

L'index Fulltext est une fonctionnalité présente dans Mysql. Il permet d'indexer le contenu de certains ou de tous les champs d'une table.
Cela permet une recherche aisée et rapide.

Tu peux regarder çà pour en savoir plus.
http://omiossec.developpez.com/mysql/fulltext/

Pour la recherche en elle même :

Mini Formulaire de recherche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>Recherche Rapide</title>
<script src="livesearch.js"></script>
</head>
 
<body onload="liveSearchInit()">
<form name="searchform">
  Recherche rapide :
  <input type="text" id="livesearch", name="q" onkeypress="liveSearchStart();" />
</form>
<div id="LSResult" style="display: none;"><div id="LSShadow">
</div></div>
</body>
</html>

La recherche dans livesearch.php :

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
<?php
 
$recherche = $_GET['q'];
$recherche = explode(" ", $recherche);
_connect(); // connexion db
 
$sql = " SELECT champs1,champs2,champs3,champs4
FROM 
table

WHERE MATCH (
champindéxé1,
champindéxé2
)
AGAINST (
'+$recherche[0]* +$recherche[1]* +$recherche[2]* +$recherche[3]* +$recherche[4]* +$recherche[5]* +$recherche[6]* +$recherche[7]*'
IN BOOLEAN
MODE)
";
//Recherche sur les 8 premiers mots du champs de recherche
$res = mysql_query($sql);
if ($res) {
  while ($data = mysql_fetch_row($res)) {
    echo "$data[0] | $data[1] - $data[2] - $data[3] | $data[4] | $data[5] <br />";
    }
}
else {
	echo "Aucun r&eacute;sultat";
}
?>

Un fichier livesearch.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
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
204
205
206
207
208
209
210
211
212
/*
// +----------------------------------------------------------------------+
// | Copyright (c) 2004 Bitflux GmbH                                      |
// +----------------------------------------------------------------------+
// | Licensed under the Apache License, Version 2.0 (the "License");      |
// | you may not use this file except in compliance with the License.     |
// | You may obtain a copy of the License at                              |
// | http://www.apache.org/licenses/LICENSE-2.0                           |
// | Unless required by applicable law or agreed to in writing, software  |
// | distributed under the License is distributed on an "AS IS" BASIS,    |
// | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or      |
// | implied. See the License for the specific language governing         |
// | permissions and limitations under the License.                       |
// +----------------------------------------------------------------------+
// | Author: Bitflux GmbH <devel@bitflux.ch>                              |
// +----------------------------------------------------------------------+
 
*/
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();
	}
}
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.searchform.q.value) {
	if (liveSearchReq && liveSearchReq.readyState < 4) {
		liveSearchReq.abort();
	}
	if ( document.forms.searchform.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 + "/livesearch.php?q=" + document.forms.searchform.q.value + liveSearchParams2);
	liveSearchLast = document.forms.searchform.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 = liveSearchRoot + liveSearchRootSubDir + 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 mail = document.getElementById('email').value;
    var uri = document.getElementById('openid_url').value;
    var text = document.forms['bx_foo']['comments'].value;
 
    var f = document.forms['commentForm'];
	if (typeof liveSearchRoot == "undefined") {
		var liveSearchRoot = "/";
	}
 
    body = "mail=" + encodeURIComponent(mail) + "&uri="+ encodeURIComponent(uri) + "&text="+ encodeURIComponent(text) + "&name="+ encodeURIComponent(name);
    new ajax (liveSearchRoot + 'inc/bx/php/preview.php', {
        postBody: body,
                method: 'post',
                onComplete: preview
    });
 
 
    return false;
}

Voila j'espère que cela va t'aider.

C'est un bon début et j'y travaille !!

Merci pour les infos ! :D