Autocomplétion formulaire d'adresse

24 avr. 2015, 13:07

Bonjour à tous,

Je voudrais réaliser un formulaire avec autocomplétion grâce à AJAX : j'ai trouvé beaucoup d'exemples sur internet, mais rien qui corresponde à ce que je souhaite, ou rien que je ne parvienne à mettre en oeuvre moi-même (en préambule, j'aurais dû préciser que pour le moment je suis une nullité notoire en javascript/ajax/jquery).

Le code est le suivant (réduit à sa plus simple expression pour l'occasion) :

Code : Tout sélectionner

<label for='societe'>Société</label><input type='text' id='societe' name='societe' value="" /><br />";
<label for='nom'>Nom</label><input type='text' id='nom' name='nom' value="" /><br />";
<label for='prenom'>Prénom</label><input type='text' id='prenom' name='prenom' value="" /><br />
<label for='adresse1'>Adresse</label><input type='text' id='adresse1' name='adresse1' value="" /><br />
<label for='adresse2'>Adresse (suite)</label><input type='text' id='adresse2' name='adresse2' value="" /><br />
<label for='codepostal'>Code postal</label><input type='text' id='codepostal' name='codepostal' value="" /><br />
<label for='ville'>Ville</label><input type='text' id='ville' name='ville' value="" /><br />
<label for='pays'>Pays</label><select name='pays' id='pays'>

<?php

	$result = mysql_query("SELECT * FROM pays ORDER by pays ASC");
	while($row = mysql_fetch_array($result))
	{
		echo "<option value=\"".$row['pays']."\">".$row['pays']."</option>";
	}

?>

</select>

J'aimerais que lorsque l'utilisateur commence à taper des lettres dans le champ "societe", des propositions lui soient automatiquement faites depuis une table sql "adresses", puis lorsque l'utilisateur sélectionne une proposition, tous les champs du formulaires soient remplis automatiquement (y compris le select "pays").

Des idées/suggestions pour m'aider à démarrer ?

Merci !

25 avr. 2015, 14:16

J'ai commencé quelque chose qui fonctionne moyennement, mais c'est une base.

Le script suivant :

Code : Tout sélectionner

$(function()
{
	// --> ÇA FONCTIONNE *********************************************
	$(".autocomplete_recherche").keyup(function()
	{
		var searchid = $(this).val();
		var dataString = 'recherche=' + searchid;
		if(searchid != '')
		{
			$.ajax(
			{
				type: "POST",
				url: "recherche.php",
				data: dataString,
				cache: false,
				success: function(html)
				{
					$("#resultat_recherche").html(html).show();
				}
			});
		}
		return false;
	});

	// --> RIEN NE SE PASSE *********************************************
	$("#resultat_recherche").live("click", function(e)
	{
		var $clicked = $(e.target);
		var $name = $clicked.find('.name').html();
		var decoded = $("<div/>").html($name).text();
		$('#societe').val(decoded);
	});

	// --> RIEN NE SE PASSE *********************************************
	$(document).live("click", function(e)
	{
		var $clicked = $(e.target);
		if (! $clicked.hasClass("autocomplete_recherche"))
		{
			$("#resultat_recherche").fadeOut();
		}
	});

	// --> RIEN NE SE PASSE *********************************************
	$('#societe').click(function()
	{
		$("#resultat_recherche").fadeIn();
	});
});

La page recherche.php :

Code : Tout sélectionner

<?php

include('_inc.configuration.php');

if($_POST)
{
	$q = $_POST['recherche'];
	$result = mysql_query("SELECT * FROM adresses WHERE societe LIKE '%$q%' ORDER BY societe LIMIT 10");
	while($row = mysql_fetch_array($result))
	{
		$_RESULTAT = $row['societe'];
		$_REQUETE = '<b>'.$q.'</b>';
		$_RESULTAT_G = str_ireplace($q, $_REQUETE, $_RESULTAT);

		echo "<div class='show'>";
		echo "<span class='name'>".$_RESULTAT_G."</span>";
		echo "</div>";
	}
}

?>

Et le code HTML :

Code : Tout sélectionner

<input type='text' class='autocomplete_recherche' id='societe' name='societe' />
<div id='resultat_recherche'></div>

La requête fonctionne très bien, les propositions depuis la base de données apparaissent. Toutefois, seule la première fonction du script semble fonctionner : les fonctions permettant (il me semble, puisque j'y connais que dalle) de faire disparaître le div résultat quand on clique en dehors ou de remplacer le champ par le résultat sélectionné, tout ça ne fonctionne pas (j'ai fait des tests avec des alert(), il ne se passe rien, les fonctions ne sont même pas lues).

Si ça fonctionne, après je pense pouvoir me démerder, par mimétisme, à remplir automatiquement le reste de mes champs.

25 avr. 2015, 14:44

Bon bon bon, je continue tout seul

"live" est deprecated en jQuery, maintenant, c'est "on" à la place. J'ai remplacé, ça marche. Mais bizarrement...

Les résultats apparaissent et disparaissent bien selon les événements déclenchés, mais la valeur de la recherche qu'on sélectionne se place dans le input environ... 1 fois sur 5. Sinon ça ne fait rien.

Et encore, quand ça marche, c'est jamais deux fois la même valeur qui marche, je n'arrive pas à trouver de logique dans l'erreur...

25 avr. 2015, 15:42

J'ai trouvé dans quelles circonstances ça marche ou ne marche pas : quand les propositions s'affichent (dans un <span class='name'></span> cf. code ci-dessus), si je clique sur le texte, ça ne marche pas. En revanche, comme le span a une largeur fixe supérieure à celle du texte, si je clique sur la partie vide à droite du texte, ça fonctionne à tous les coups, le texte se place bien dans le input.

Gnuuuh ?

26 avr. 2015, 11:48

Ça avance gentiment... J'en suis là.

Code HTML :

Code : Tout sélectionner

<label for='societe'>Société</label><input type='text' id='societe' name='societe' value="" /><br />";
<label for='nom'>Nom</label><input type='text' id='nom' name='nom' value="" /><br />";
<label for='prenom'>Prénom</label><input type='text' id='prenom' name='prenom' value="" /><br />
<label for='adresse1'>Adresse</label><input type='text' id='adresse1' name='adresse1' value="" /><br />
<label for='adresse2'>Adresse (suite)</label><input type='text' id='adresse2' name='adresse2' value="" /><br />
<label for='codepostal'>Code postal</label><input type='text' id='codepostal' name='codepostal' value="" /><br />
<label for='ville'>Ville</label><input type='text' id='ville' name='ville' value="" /><br />
<label for='pays'>Pays</label><select name='pays' id='pays'>

<?php

   $result = mysql_query("SELECT * FROM pays ORDER by pays ASC");
   while($row = mysql_fetch_array($result))
   {
      echo "<option value=\"".$row['pays']."\">".$row['pays']."</option>";
   }

?>

</select>

Code jQuery :

Code : Tout sélectionner

$(function()
{
	$(".autocomplete_recherche").keyup(function()
	{
		var searchid = $(this).val();
		var dataString = 'recherche=' + searchid;
		if(searchid != '')
		{
			$.ajax(
			{
				type: "POST",
				url: "recherche.php",
				data: dataString,
				cache: false,
				success: function(html)
				{
					$("#resultat_recherche").html(html).show();
				}
			});
		}
		return false;
	});

	$("#resultat_recherche").on("click", function(e)
	{
		var $clicked = $(e.target);

		var $r_societe = $clicked.find('.ac_societe').html();
		var decoded = $("<div/>").html($r_societe).text();
		$('#societe').val(decoded);

		var $r_nom = $clicked.find('.ac_nom').html();
		var decoded = $("<div/>").html($r_nom).text();
		$('#nom').val(decoded);

		var $r_prenom = $clicked.find('.ac_prenom').html();
		var decoded = $("<div/>").html($r_prenom).text();
		$('#prenom').val(decoded);
		
		var $r_adresse1 = $clicked.find('.ac_adresse1').html();
		var decoded = $("<div/>").html($r_adresse1).text();
		$('#adresse1').val(decoded);
		
		var $r_adresse2 = $clicked.find('.ac_adresse2').html();
		var decoded = $("<div/>").html($r_adresse2).text();
		$('#adresse2').val(decoded);
		
		var $r_codepostal	= $clicked.find('.ac_codepostal').html();
		var decoded = $("<div/>").html($r_codepostal).text();
		$('#codepostal').val(decoded);
		
		var $r_ville = $clicked.find('.ac_ville').html();
		var decoded = $("<div/>").html($r_ville).text();
		$('#ville').val(decoded);
		
		var $r_pays = $clicked.find('.ac_pays').html();
		var decoded = $("<div/>").html($r_pays).text();
		$('#pays').val(decoded);
	});

	$(document).on("click", function(e)
	{
		var $clicked = $(e.target);
		if (! $clicked.hasClass("autocomplete_recherche"))
		{
			$("#resultat_recherche").fadeOut();
		}
	});
});

La page recherche.php

Code : Tout sélectionner

<?php

include('_inc.configuration.php');

if($_POST)
{
	$q = $_POST['recherche'];
	$result = mysql_query("SELECT * FROM adresses WHERE societe LIKE '%$q%' ORDER BY societe LIMIT 10");
	while($row = mysql_fetch_array($result))
	{
		$_RESULTAT = $row['societe'];
		$_REQUETE = '<b>'.$q.'</b>';
		$_RESULTAT_G = str_ireplace($q, $_REQUETE, $_RESULTAT);

		echo "<div class='show'>";
		echo "<span class='ac_societe'>".$_RESULTAT_G."</span>";
		echo "<span style='display:none;' class='ac_nom'>".htmlentities($row['nom'])."</span>";
		echo "<span style='display:none;' class='ac_prenom'>".htmlentities($row['prenom'])."</span>";
		echo "<span style='display:none;' class='ac_adresse1'>".htmlentities($row['adresse1'])."</span>";
		echo "<span style='display:none;' class='ac_adresse2'>".htmlentities($row['adresse2'])."</span>";
		echo "<span style='display:none;' class='ac_codepostal'>".htmlentities($row['codepostal'])."</span>";
		echo "<span style='display:none;' class='ac_ville'>".htmlentities($row['ville'])."</span>";
		echo "<span style='display:none;' class='ac_pays'>".htmlentities($row['pays'])."</span>";
		echo "</div>";
	}
}

?>

Et Ô miracle, ça fonctionne (presque) parfaitement (par contre, je ne sais pas si ce que j'ai fait est très académique puisque je n'y connais rien en jQuery).

Il me reste les deux problèmes suivants :

- je n'arrive pas à assigner la valeur de retour à mon select "pays"
- j'ai toujours ce drôle de comportement lors de l'affichage des propositions de société : quand je clique à côté du texte, dans la partie vide du conteneur, ça marche. SInon, ça marche pas...

Allez, un beau geste, je me sens seule

07 mai 2015, 22:54

Rebonjour à tous,

Je me permets de relancer le sujet, qui n'a pas trouvé de preneur encore...
Mon système fonctionne parfaitement, à l'exception du fait suivant : lorsque la liste des propositions apparaît, si je clique SUR LE TEXTE, ça en marche pas (l'autocomplétion ne se fait pas), mais si je clique À CÔTÉ du texte, dans la partie vide du <div class='show'> (cf. code ci après) eh bien ça fonctionne, l'autocomplétion se fait au poil.

Je m'arrache les cheveux à comprendre pourquoi !

Code HTML :

Code : Tout sélectionner

<label for='societe'>Société</label><input type='text' id='societe' name='societe' value="" /><br />";
<label for='nom'>Nom</label><input type='text' id='nom' name='nom' value="" /><br />";
<label for='prenom'>Prénom</label><input type='text' id='prenom' name='prenom' value="" /><br />
<label for='adresse1'>Adresse</label><input type='text' id='adresse1' name='adresse1' value="" /><br />
<label for='adresse2'>Adresse (suite)</label><input type='text' id='adresse2' name='adresse2' value="" /><br />
<label for='codepostal'>Code postal</label><input type='text' id='codepostal' name='codepostal' value="" /><br />
<label for='ville'>Ville</label><input type='text' id='ville' name='ville' value="" /><br />
<label for='pays'>Pays</label><select name='pays' id='pays'>

<?php

   $result = mysql_query("SELECT * FROM pays ORDER by pays ASC");
   while($row = mysql_fetch_array($result))
   {
      echo "<option value=\"".$row['pays']."\">".$row['pays']."</option>";
   }

?>

</select>

Code jQuery :

Code : Tout sélectionner

$(function()
{
	$(".autocomplete_recherche").keyup(function()
	{
		var searchid = $(this).val();
		var dataString = 'recherche=' + searchid;
		if(searchid != '')
		{
			$.ajax(
			{
				type: "POST",
				url: "recherche.php",
				data: dataString,
				cache: false,
				success: function(html)
				{
					$("#resultat_recherche").html(html).show();
				}
			});
		}
		return false;
	});

	$("#resultat_recherche").on("click", function(e)
	{
		var $clicked = $(e.target);

		var $r_societe = $clicked.find('.ac_societe').html();
		var decoded = $("<div/>").html($r_societe).text();
		$('#societe').val(decoded);

		var $r_nom = $clicked.find('.ac_nom').html();
		var decoded = $("<div/>").html($r_nom).text();
		$('#nom').val(decoded);

		var $r_prenom = $clicked.find('.ac_prenom').html();
		var decoded = $("<div/>").html($r_prenom).text();
		$('#prenom').val(decoded);
		
		var $r_adresse1 = $clicked.find('.ac_adresse1').html();
		var decoded = $("<div/>").html($r_adresse1).text();
		$('#adresse1').val(decoded);
		
		var $r_adresse2 = $clicked.find('.ac_adresse2').html();
		var decoded = $("<div/>").html($r_adresse2).text();
		$('#adresse2').val(decoded);
		
		var $r_codepostal	= $clicked.find('.ac_codepostal').html();
		var decoded = $("<div/>").html($r_codepostal).text();
		$('#codepostal').val(decoded);
		
		var $r_ville = $clicked.find('.ac_ville').html();
		var decoded = $("<div/>").html($r_ville).text();
		$('#ville').val(decoded);
		
		var $r_pays = $clicked.find('.ac_pays').html();
		var decoded = $("<div/>").html($r_pays).text();
		$('#pays').val(decoded);
	});

	$(document).on("click", function(e)
	{
		var $clicked = $(e.target);
		if (! $clicked.hasClass("autocomplete_recherche"))
		{
			$("#resultat_recherche").fadeOut();
		}
	});
});

La page recherche.php

Code : Tout sélectionner

<?php

include('_inc.configuration.php');

if($_POST)
{
	$q = $_POST['recherche'];
	$result = mysql_query("SELECT * FROM adresses WHERE societe LIKE '%$q%' ORDER BY societe LIMIT 10");
	while($row = mysql_fetch_array($result))
	{
		$_RESULTAT = $row['societe'];
		$_REQUETE = '<b>'.$q.'</b>';
		$_RESULTAT_G = str_ireplace($q, $_REQUETE, $_RESULTAT);

		echo "<div class='show'>";
		echo "<span class='ac_societe'>".$_RESULTAT_G."</span>";
		echo "<span style='display:none;' class='ac_nom'>".htmlentities($row['nom'])."</span>";
		echo "<span style='display:none;' class='ac_prenom'>".htmlentities($row['prenom'])."</span>";
		echo "<span style='display:none;' class='ac_adresse1'>".htmlentities($row['adresse1'])."</span>";
		echo "<span style='display:none;' class='ac_adresse2'>".htmlentities($row['adresse2'])."</span>";
		echo "<span style='display:none;' class='ac_codepostal'>".htmlentities($row['codepostal'])."</span>";
		echo "<span style='display:none;' class='ac_ville'>".htmlentities($row['ville'])."</span>";
		echo "<span style='display:none;' class='ac_pays'>".htmlentities($row['pays'])."</span>";
		echo "</div>";
	}
}

?>

07 mai 2015, 22:58

Pour être plus précis, lorsque je clique SUR LE TEXTE, il semble qu'il se passe quelque chose puisque la liste des pays revient au tout début, à l'index 0, et tous les autres champs se vident s'ils étaient remplis...

09 mai 2015, 15:15

Bon ben je continue mon petit sujet à moi tout seul

J'ai réussi à faire fonctionner mon système, mais avec une faute dans le code HTML (un comble !).

Je ne sais pas pourquoi ni comment ça marche, mais ça marche.

Les portions de code concernées :

Code : Tout sélectionner

$(function()
{
	$("#resultat_recherche").on("click", function(e)
	{
		var $clicked = $(e.target);

		var $r_societe = $clicked.find('.ac_societe').html();
		var decoded = $("<div/>").html($r_societe).text();
		$('#societe').val(decoded);

		var $r_nom = $clicked.find('.ac_nom').html();
		var decoded = $("<div/>").html($r_nom).text();
		$('#nom').val(decoded);

		var $r_prenom = $clicked.find('.ac_prenom').html();
		var decoded = $("<div/>").html($r_prenom).text();
		$('#prenom').val(decoded);

		var $r_adresse1 = $clicked.find('.ac_adresse1').html();
		var decoded = $("<div/>").html($r_adresse1).text();
		$('#adresse1').val(decoded);

		var $r_adresse2 = $clicked.find('.ac_adresse2').html();
		var decoded = $("<div/>").html($r_adresse2).text();
		$('#adresse2').val(decoded);

		var $r_codepostal = $clicked.find('.ac_codepostal').html();
		var decoded = $("<div/>").html($r_codepostal).text();
		$('#codepostal').val(decoded);

		var $r_ville = $clicked.find('.ac_ville').html();
		var decoded = $("<div/>").html($r_ville).text();
		$('#ville').val(decoded);

		var $r_pays = $clicked.find('.ac_pays').html();
		var decoded = $("<div/>").html($r_pays).text();
		$('#pays').val(decoded);
	});
});

Et le code avec la magnifique faute qui fait tout fonctionner :

Code : Tout sélectionner

if($_POST)
{
	$q = $_POST['recherche'];
	$result = mysql_query("SELECT * FROM adresses WHERE societe LIKE '%$q%' ORDER BY societe LIMIT 10");
	while($row = mysql_fetch_array($result))
	{
		$_RESULTAT = $row['societe'];
		$_REQUETE = '<b>'.$q.'</b>';
		$_RESULTAT_G = str_ireplace($q, $_REQUETE, $_RESULTAT);

		echo "<div class='show' style='>"; // <-- Voilà la faute !
		echo "<span class='ac_recherche'>".$_RESULTAT_G."</span>";
		echo "<span style='display:none;' class='ac_societe'>".htmlentities($row['societe'])."</span>";
		echo "<span style='display:none;' class='ac_nom'>".htmlentities($row['nom'])."</span>";
		echo "<span style='display:none;' class='ac_prenom'>".htmlentities($row['prenom'])."</span>";
		echo "<span style='display:none;' class='ac_adresse1'>".htmlentities($row['adresse1'])."</span>";
		echo "<span style='display:none;' class='ac_adresse2'>".htmlentities($row['adresse2'])."</span>";
		echo "<span style='display:none;' class='ac_codepostal'>".htmlentities($row['codepostal'])."</span>";
		echo "<span style='display:none;' class='ac_ville'>".htmlentities($row['ville'])."</span>";
		echo "<span style='display:none;' class='ac_pays'>".htmlentities($row['pays'])."</span>";
		echo "</div>";
	}
}

Bon. Ça marche. Mais quand même, ça me chiffonne de pas comprendre pourquoi ; et j'aimerais bien avoir un code pas foireux.

Y a-t-il une bonne âme en ces lieux ?

Merci !

11 oct. 2015, 14:07

Je me permets de remonter ce sujet qui n'a jamais trouvé de bonne âme pour voler à mon secours !

J'aimerais comprendre pourquoi le code fonctionne avec une faute, et accessoirement ajouter une fonctionnalité pour permettre de choisir l'option suggérée en utilisant les flèches du clavier...

Merci pour votre aide !

28 févr. 2016, 03:39

Je fais une dernière tentative pour voir si quelqu'un peut m'aider sur ce sujet : ça fait un moment que j'essaie d'améliorer tout ça, mais ça n'avance plus hélas.
J'ai également des doutes sur la sécurité de mon script...

28 févr. 2016, 11:17

Bonjour,

C'est contre-productif de balancer tout ton code en attendant qu'on le debug, au final on ne sait même pas quelle est ta question.

Pose ta question clairement, et dis nous ce que tu as essayé :
- Soit tu as un bug dans ton code et il faut que tu nous donnes le ou les messages d'erreur exact et les passages de codes problématiques (et seulement les extraits)
- Soit tu es bloqué sur un point plus général où tu n'as aucune piste pour avancer et dis nous précisément le quel qu'on te donnes des pistes pour que tu puisses avancer.

Mais demander à ce qu'on comprenne pourquoi ton code bugué fonctionne quand même... honnêtement, c'est à toi de faire un débug pour voir ce qui marche ou ne marche pas

Autocomplétion formulaire d'adresse

Qui est en ligne