Moteur de recherche autocomplétion avec un select et un input

**Sergio_zero** · 18/07/2015, 12h24

Bonjour à tous et à toutes.
J'ai un petit moteur de recherche autocompletion qui fonctionne très bien mais je voudrai le modifier.
Pour le moment ce moteur de recherche fonctionne avec un input qui affiche les références présentes en bdd au fur et à mesure que l'on renseigne le champ.
Mon souci c'est que parfois il y a beaucoup de références qui s'affiche en dessous.
J'aimerai pour limiter l'affichage de trop de référence ajouter un champ select pour choisir une marque puis que l'input affiche les références comme actuellement mais en tenant conte de la valeur du select.
Voici mon script actuel.

Le formulaire

Code html :

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

1
2
3
4
5
6
<form style=" width:250px; display:inline;" method="post" action="<?php echo''.ROOTPATH.'';?>/index.php?page=cartouche">
                <input type="hidden" name="choix" value="POUR_IMPRIMANTE" />
                <input name="name" type="text" autocomplete="off" onKeyUp="suggest(this, 'cartouche_generique', 'POUR_IMPRIMANTE');" placeholder="Par Imprimante"/>
                <img src="<?php echo''.ROOTPATH.'';?>/images/go.png"  alt="fleche"/>
                <input type="submit" class="Cder" value="ok"/>
            </form>

La page autocomplete.js

Code javascript :

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 = 500+'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_generique = false; 
		try { xhr_generique = new ActiveXObject("Microsoft.XMLHTTP"); }
		catch(e){ xhr_generique = new XMLHttpRequest(); }
 
		//Requête AJAX : attention à bien donner le chemin du fichier autocomplete_ajax.php
		//timestamp en parametre pour empecher la mise en cache
		xhr_generique.open("GET", '../includes/autocomplete_ajax.php?table='+table+'&field='+field+'&search='+element.value+'&nocache='+Math.floor((new Date()).getTime()), true); 
		// Attente de l'état 4 (-> OK)
		xhr_generique.onreadystatechange = function () {
			// l'état est à 4, requête reçue
			if(xhr_generique.readyState == 4){
				var xml = xhr_generique.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_generique.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;
}

La page autocomplete_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
34
35
36
37
38
39
40
41
<?php
$check = array('cartouche_generique' => array('POUR_IMPRIMANTE'));
//Connexion à la base de données
include('identifiants.php');
connexionbdd();
$table = (isset($_GET['table']) ? $_GET['table'] : '');
$field = (isset($_GET['field']) ? $_GET['field'] : '');
$search = (isset($_GET['search']) ? $_GET['search'] : '');
 
if(isset($check[$table]) && in_array($field, $check[$table])){ //Vérification
	if($table && $field && $search){
		$search = strtolower(mysql_escape_string($search));
 
		header("content-type: application/xml");
		echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
		echo '<suggests>';
 
		$and_ou_or = 'AND'; //on utilisera AND dans la boucle
		$mots = explode(" ", $search); //séparation des mots
		$nombre_mots = count ($mots); //comptage du nombre de mots
		$valeur_requete = '';
		for($nombre_mots_boucle = 0; $nombre_mots_boucle < $nombre_mots; $nombre_mots_boucle++) 
		//tant que le nombre de mots de la recherche est supérieur à celui de la boucle, on continue en incrémentant à chaque fois le nombre de mots
			{
				$valeur_requete .= '' . $and_ou_or .' lower(`'.$field.'`) LIKE \'%' . $mots[$nombre_mots_boucle] . '%\''; //modification de la variable $valeur_requete
			}
		$valeur_requete = ltrim($valeur_requete,$and_ou_or); //suppression de AND ou de OR au début de la boucle
 
		$query = 'SELECT `'.$field.'` FROM `'.$table.'` WHERE '.$valeur_requete.' GROUP BY `'.$field.'`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');
}
?>

Mon souci se situ essentiellement au niveau du js, je ne sais pas comment récupérer la valeur du select.
Merci d'avance à tous ceux et celles qui pourrons m'aider.

**NoSmoking** · 19/07/2015, 18h14

Bonjour,

Mon souci se situ essentiellement au niveau du js, je ne sais pas comment récupérer la valeur du select.

Comment récupérer la valeur d'un select ?

**Sergio_zero** · 20/07/2015, 23h48

Bonsoir NoSmoking et merci de ton aide.
Tout d'abord je suis c mais je suis en train de modifier les requêtes de mes sites pour passer en PDO.
Je vais aller m’attarder un peu sur ton tuto, je devrai y trouver mon bonheur.
A plus et merci encore.

**Sergio_zero** · 21/07/2015, 01h31

Merci pour ce lien très instructif.
Voici donc comment j'ai modifié mon script.

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
<?php
echo'<form style=" width:250px; display:inline;" method="post" action="'.ROOTPATH.'/index.php?page=produits-oem">';
	echo'<input type="hidden" name="choix" value="ref_oem" />';
    echo'<label for="marques">
		<strong class="espacement_text_200">Sélectionnez la marque : </strong>
	</label>';
	echo'<select id="marqueSelect" name="marque" onchange="suggest_marque(marque_sel);">
		<option value="none">Votre sélection</option>';
		$reponse = $bdd->query('SELECT DISTINCT marque FROM cartouche_oem ORDER BY marque ASC');			
        while ($back = $reponse->fetch())
            {
                echo '<option value="'.($back['marque']).'">'.$back['marque'].'</option>';
            }	
	echo'</select><br/>';
	$reponse->closeCursor();
	?>
    <input name="name" type="text" autocomplete="off" onKeyUp="suggest_ref(this, 'cartouche_oem', 'ref_oem');" placeholder="Par Référence"/>
    <?php
	echo'<img src="'.ROOTPATH.'/images/go.png"  alt="fleche"/>';
	echo'<input type="submit" class="Cder" value="ok"/>';
echo'</form>';
 
//Retour variable du js mais je sais pas si ça peux fonctionner
$Titre = "<script>document.write(texte);</script>";
echo $Titre;
?>

Le 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
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
//Récupération de l'option du select id marqueSelect
function suggest_marque(marque_sel){
	if(!document.getElementById('marqueSelect')){
		var liste, texte;
		liste = document.getElementById("marqueSelect");
		texte = liste.options[liste.selectedIndex].text;
		document.write(texte); 
	}
}
 
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_ref(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 = 500+'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_generique = false; 
		try { xhr_generique = new ActiveXObject("Microsoft.XMLHTTP"); }
		catch(e){ xhr_generique = new XMLHttpRequest(); }
 
		//Requête AJAX : attention à bien donner le chemin du fichier autocomplete_ajax.php
		//timestamp en parametre pour empecher la mise en cache
		xhr_generique.open("GET", '../includes/autocomplete_ajax_par_ref_oem.php?table='+table+'&field='+field+'&search='+element.value+'&nocache='+Math.floor((new Date()).getTime()), true); 
		// Attente de l'état 4 (-> OK)
		xhr_generique.onreadystatechange = function () {
			// l'état est à 4, requête reçue
			if(xhr_generique.readyState == 4){
				var xml = xhr_generique.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_generique.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;
}

et ma page ajax qui est encore en mysql mais qui fonctionne. lol

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
34
35
36
37
38
39
<?php
$check = array('cartouche_oem' => array('ref_oem'));
//Connexion à la base de données
include('identifiants.php');
connexionbdd();
$table = (isset($_GET['table']) ? $_GET['table'] : '');
$field = (isset($_GET['field']) ? $_GET['field'] : '');
$search = (isset($_GET['search']) ? $_GET['search'] : '');
//$IdType = 'Agfa Photo';
if(isset($check[$table]) && in_array($field, $check[$table])){ //Vérification
	if($table && $field && $search){
		$search = strtolower(mysql_escape_string($search));
		header("content-type: application/xml");
		echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
		echo '<suggests>';
		$and_ou_or = 'AND'; //on utilisera AND dans la boucle
		$mots = explode(" ", $search); //séparation des mots
		$nombre_mots = count ($mots); //comptage du nombre de mots
		$valeur_requete = '';
		for($nombre_mots_boucle = 0; $nombre_mots_boucle < $nombre_mots; $nombre_mots_boucle++) 
		//tant que le nombre de mots de la recherche est supérieur à celui de la boucle, on continue en incrémentant à chaque fois le nombre de mots
			{
				$valeur_requete .= '' . $and_ou_or .' lower(`'.$field.'`) LIKE \'%' . $mots[$nombre_mots_boucle] . '%\''; //modification de la variable $valeur_requete
			}
		$valeur_requete = ltrim($valeur_requete,$and_ou_or); //suppression de AND ou de OR au début de la boucle
 
		$query = 'SELECT `'.$field.'` FROM `'.$table.'` WHERE '.$valeur_requete.' GROUP BY `'.$field.'`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');
}
?>

Ma première question est la suivante.
Comment je peux savoir si mon select est bien récupéré dans le ja ?

**NoSmoking** · 21/07/2015, 23h07

Code :

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

1
2
3
//Retour variable du js mais je sais pas si ça peux fonctionner
$Titre = "<script>document.write(texte);</script>";
echo $Titre;

je ne saisie pas trop ce que tu cherches à faire.

Comment je peux savoir si mon select est bien récupéré dans le ja ?

**Sergio_zero** · 22/07/2015, 00h57

Comment je peux savoir si mon select est bien récupéré dans le ja ?

Je voulais dire Comment je peux savoir si mon select est bien récupéré dans le javascript.
Je sais que je rentre bien dans la fonction suggest_marque car j'ai fait un alert mais comment faire pour que la requête qui vas chercher les références dans la bdd tienne conte de la marque choisi dans le select ?

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
180
181
182
183
184
185
186
function suggest_marque(){
	//alert("valeur_cherchee")
	select = document.getElementById("marqueSelect");
		choice = select.selectedIndex  // Récupération de l'index du <option> choisi
 
		valeur_cherchee = select.options[choice].value;
		var style = [choice].value;
}
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_ref(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 = 500+'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_generique = false; 
		try { xhr_generique = new ActiveXObject("Microsoft.XMLHTTP"); }
		catch(e){ xhr_generique = new XMLHttpRequest(); }
 
		//Requête AJAX : attention à bien donner le chemin du fichier autocomplete_ajax.php
		//timestamp en parametre pour empecher la mise en cache
		xhr_generique.open("GET", '../includes/autocomplete_ajax_par_ref_oem.php?table='+table+'&field='+field+'&search='+element.value+'&nocache='+Math.floor((new Date()).getTime()), true); 
		// Attente de l'état 4 (-> OK)
		xhr_generique.onreadystatechange = function () {
			// l'état est à 4, requête reçue
			if(xhr_generique.readyState == 4){
				var xml = xhr_generique.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_generique.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;
}

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
34
35
36
37
38
39
<?php
$check = array('cartouche_oem' => array('ref_oem'));
//Connexion à la base de données
include('identifiants.php');
connexionbdd();
$table = (isset($_GET['table']) ? $_GET['table'] : '');
$field = (isset($_GET['field']) ? $_GET['field'] : '');
$search = (isset($_GET['search']) ? $_GET['search'] : '');
//$IdType = 'Agfa Photo';
if(isset($check[$table]) && in_array($field, $check[$table])){ //Vérification
	if($table && $field && $search){
		$search = strtolower(mysql_escape_string($search));
		header("content-type: application/xml");
		echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
		echo '<suggests>';
		$and_ou_or = 'AND'; //on utilisera AND dans la boucle
		$mots = explode(" ", $search); //séparation des mots
		$nombre_mots = count ($mots); //comptage du nombre de mots
		$valeur_requete = '';
		for($nombre_mots_boucle = 0; $nombre_mots_boucle < $nombre_mots; $nombre_mots_boucle++) 
		//tant que le nombre de mots de la recherche est supérieur à celui de la boucle, on continue en incrémentant à chaque fois le nombre de mots
			{
				$valeur_requete .= '' . $and_ou_or .' lower(`'.$field.'`) LIKE \'%' . $mots[$nombre_mots_boucle] . '%\''; //modification de la variable $valeur_requete
			}
		$valeur_requete = ltrim($valeur_requete,$and_ou_or); //suppression de AND ou de OR au début de la boucle
 
		$query = 'SELECT `'.$field.'` FROM `'.$table.'` WHERE '.$valeur_requete.' GROUP BY `'.$field.'`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');
}
?>

**NoSmoking** · 25/07/2015, 14h12

...mais comment faire pour que la requête qui vas chercher les références dans la bdd tienne conte de la marque choisi dans le select ?

il faut simplement passer en paramètre cette valeur !

Moteur de recherche autocomplétion avec un select et un input

AJAX

Vue hybride

Discussions similaires

Partager

Partager