AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 01 08 23:02:11
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AJAX : COMPLETER AUTOMATIQUEMENT UN FORMULAIRE (<INPUT TYPE=TEXT>) PHP ET BASE MYSQL , À VOIR ABSOLUMENT !


Information sur la source

Catégorie :Formulaire Classé sous : ajax, formulaire, mysql, classe, autocompletion Niveau : Initié Date de création : 15/10/2007 Vu / téléchargé: 14 827 / 1 084
Auteur : phpajax Ecrire un message privé
Note :
3,25 / 10 - par 4 personnes
3,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (23)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Tout est dans le titre, ce script permet de proposer automatiquement une liste selon les lettres qu'on tappe.
dans le zip vous trouverez aussi une classe pour la connexion mysql et l'extraction des données.

PS: ceci est ma première source, donc merci de me noter et de mettre un commentaire, ca m'aidera a avancer :)
 

Source

  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>Ajax Auto complete</title>
  • <script type="text/javascript" src="jquery.js"></script>
  • <script type="text/javascript">
  • function lookup(inputString) {
  • if(inputString.length == 0) {
  • // Hide the suggestion box.
  • $('#suggestions').hide();
  • } else {
  • $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
  • if(data.length >0) {
  • $('#suggestions').show();
  • $('#autoSuggestionsList').html(data);
  • }
  • });
  • }
  • } // lookup
  • function fill(thisValue) {
  • $('#inputString').val(thisValue);
  • setTimeout("$('#suggestions').hide();", 200);
  • }
  • </script>
  • <style type="text/css">
  • body {
  • font-family: Helvetica;
  • font-size: 11px;
  • color: #000;
  • }
  • h3 {
  • margin: 0px;
  • padding: 0px;
  • }
  • .suggestionsBox {
  • position: relative;
  • left: 30px;
  • margin: 10px 0px 0px 0px;
  • width: 200px;
  • background-color: #212427;
  • -moz-border-radius: 7px;
  • -webkit-border-radius: 7px;
  • border: 2px solid #000;
  • color: #fff;
  • }
  • .suggestionList {
  • margin: 0px;
  • padding: 0px;
  • }
  • .suggestionList li {
  • margin: 0px 0px 3px 0px;
  • padding: 3px;
  • cursor: pointer;
  • }
  • .suggestionList li:hover {
  • background-color: #659CD8;
  • }
  • </style>
  • </head>
  • <body>
  • <div>
  • <form>
  • <div>
  • Entrez votre pays:
  • <br />
  • <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
  • </div>
  • <div class="suggestionsBox" id="suggestions" style="display: none;">
  • <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
  • <div class="suggestionList" id="autoSuggestionsList">
  • &nbsp;
  • </div>
  • </div>
  • </form>
  • </div>
  • </body>
  • </html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto complete</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

<style type="text/css">
	body {
		font-family: Helvetica;
		font-size: 11px;
		color: #000;
	}
	
	h3 {
		margin: 0px;
		padding: 0px;	
	}

	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
</style>

</head>

<body>


	<div>
		<form>
			<div>
				Entrez votre pays:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
		</form>
	</div>

</body>
</html>

Conclusion

Merci de laisser votre éval ;)
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de jhd le 16/10/2007 10:08:27

bon exemple d utilisation de jquery

signaler à un administrateur
Commentaire de mehdib92 le 16/10/2007 15:38:00

très bon script mais j'aimerais le modifier pour l'utiliser avec ma base et inpossible d'affiche quelquechose dans la box des suggestions. pourrais-je avoir un coup de main ?

signaler à un administrateur
Commentaire de stfrouille le 16/10/2007 17:16:10

C'est bizarre comme ca ressemble étrangement a ca .....


http://nodstrum.com/2007/09/19/autocompleter/


meme design, meme code......hum hum

signaler à un administrateur
Commentaire de spoonisback le 16/10/2007 19:23:06

Salut !!
Y'a un truc que je comprend pas : tu dis 'PS: ceci est ma première source' et pourtant tu la met en niveau initié...
Initié d'e pompage, c'est sur, car comme le dis STFROUILLE, à l'adresse qu'il donne, cette source existe déjà...

je n'ai qu'une chose à dire...Pfuuu

signaler à un administrateur
Commentaire de phpajax le 17/10/2007 02:11:19

le but c'est de la partager avec tout le monde, et je pense que cette source te sera utile npn?

signaler à un administrateur
Commentaire de alfrai le 17/10/2007 04:07:54

Pas mal la source. Je confirme, elle existe déjà (ici : http://www.ajaxrain.com/)et je l'ai testé en local. Moi aussi, je souhaite  l'exploiter. Je souhaite m'en servir pour naviguer sur mon site. L'idée serai, depuis l'autocomplétion, d'afficher une page web  pour chaque pays. Le problème c'est que je débute et le JS et le PHP c'est encore flou pour moi. Quelqu'un pourrait-il m'aider ?

signaler à un administrateur
Commentaire de bultez le 19/10/2007 15:58:34


probablement intéressant ?
même si le copié/collé aurait du être dit.

néanmoins, faire appel au serveur et à un script
PHP qui va chercher des données dans une base à
chaque frappe au clavier... me laisse rêveur.

Cordialement.

signaler à un administrateur
Commentaire de LeFauve42 le 23/10/2007 11:31:20

Salut,

> néanmoins, faire appel au serveur et à un script
> PHP qui va chercher des données dans une base à
> chaque frappe au clavier... me laisse rêveur.

C'est courrant de nos jours, cependant, en principe on utilise un timer pour n'appeler le serveur uniquement quand l'utilisateur a arrete de taper pendant 1 (ou eventuellement  0.5) seconde...
Ca evite de masacrer le serveur quand quelqu'un qui sait ce qu'il veut et tape vite utilise ta page...

Eric

signaler à un administrateur
Commentaire de lanner le 27/10/2007 22:51:30

bizare j'ai testé la requete fonctionne vu que le petit tableau s'affiche mais c'est vide dedans , je vois que des points ...
Si quelqu'un a une idée
Merci

signaler à un administrateur
Commentaire de poam5356 le 29/10/2007 22:54:14

Je viens de le faire fonctionner avec ma base Mysql. Je n'avais aussi que des points qui ne sont que les points des balises listes <li> utilisées pour mettre en forme les résultats.
Tu dois modifier les variables du fichier rpc.php pour les faire correspondre au nom du champ de ta table.
C'est en ligne 18 (nom et pays)
$query = $db->sql_query("SELECT nom FROM pays WHERE nom  LIKE '$queryString%' LIMIT 10");
et 22 [nom]
echo '<li onClick="fill(\''.$result[nom].'\');">'.$result[nom].'</li>';
et modifier le fichier config.php avec tes paramètres.

signaler à un administrateur
Commentaire de alfrai le 30/10/2007 08:48:40

Salut !!
Quelqu'un pourrait-il m'aider !
Je souhaiterais exploiter cette source pour naviguer au sein d'un site. Le problème c'est que je ne maîtrise pas encore le JS et le PHP.  L'idée, c'est pouvoir avec un bouton "valider" permettre l'ouverture d'une nouvelle page web. Une nouvelle page web pour chaque pays. Un bout de script sera le bienvenu. Merci d'avance.

signaler à un administrateur
Commentaire de putch le 30/10/2007 11:58:03 1/10

salut !

idem et tu le dis toi même
PS: ceci est MA première source,

ma, ma ...

donc 9/10 pour l'auteur original de cette source, 1/10 pour un joli copier-coller

signaler à un administrateur
Commentaire de lanner le 21/11/2007 20:56:57

Salut, j'ai une petite erreur qui me chiffone mais qui n'empeche en rien le foncitonnement , la ligne en question est celle ci :

echo '<li onClick="fill(\''.$result[liste_nom].'\');">'.$result[liste_nom].'</li>';

Lorsque je fait le test sur une de mes bases jai une erreur en bas de ma page internet et il y a de marqué :

Ligne : 1
Car :   29
Erreur :")" attendu
Code : 0

quelqu'un aurait une petite idée ?
merci d'avance

signaler à un administrateur
Commentaire de lanner le 21/11/2007 22:33:36

donc j'ai refait quelques tests et effectivement si j'enlève onClick="fill(\''.$result[liste_nom].'\');" je n'ai plus le petit message d'erreur, mais la je ne sais pas si cela vient des functions javascript ou autres , si cela peut aider à résoudre ce petit désagrément ;)

signaler à un administrateur
Commentaire de LeFauve42 le 22/11/2007 10:29:29

> echo '<li onClick="fill(\''.$result[liste_nom].'\');">'.$result[liste_nom].'</li>';

Ca peut se produire si tu as des ' ou des " dans tes resultats.
Si c'est le cas, tu dois pouvoir t'en sortir en utilisant addslashes($result[liste_nom]) a la place du premier $result[liste_nom]

Eric

signaler à un administrateur
Commentaire de lanner le 22/11/2007 13:02:04

c'est parfait à priori, merci , je vais poursuivre mes tests :)

signaler à un administrateur
Commentaire de frakosun le 11/01/2008 11:25:44 1/10

c'est du simple copier/coller d'un autre site, et cela n'est même pas indiqué dans la présentation de la source.
Pour moi c'est du vol, du non respect caractérisé. après chacun son point de vue.

signaler à un administrateur
Commentaire de nicomilville le 30/03/2008 12:15:03 1/10

Entièrement daccord avec toi, dans le règlement il est spécifié que quand on poste une source, si elle n'est pas de nous il faut que l'on marque qui est l'auteur respectif hors ici ça n'est pas le cas vu que phpajax dit c'est "sa" première source, j'appellerais plutôt ça son premier copier/coller !!!

1/10 car si tu avais mis l'auteur on aurai peut être mis quelque chose comme 9/10 hors ce n'est pas le cas donc je pense qu'un copier/coller est a la hauteur de tout le monde !!!!

signaler à un administrateur
Commentaire de soundpanther le 22/05/2008 20:28:06 10/10

Non c'est tres bien

signaler à un administrateur
Commentaire de nicomilville le 22/05/2008 21:26:53

oui, c'est très bien mais cette source n'est pas de lui donc aucun intéret !

a++

signaler à un administrateur
Commentaire de soundpanther le 23/05/2008 12:23:24

Bonjour,

Je sais moi je donne une bonne note car c'est ici que je l'ai trouver puis adapter pour mon formulaire c'est pour ça que j'ai dit "c'est très bien" sinon surement je lauré pas trouver.

damage qui n'a pas dit quelle vient d'un autre d'envelopper

Cordialement,





signaler à un administrateur
Commentaire de nicomilville le 23/05/2008 16:28:32

oui, si il l'avait dit, je doute qu'il ai eu des 1/10 !

a++

signaler à un administrateur
Commentaire de umarc le 07/01/2009 14:16:14

bonjour,
lors de l'utilisation de ce code je retourne ce message d'erreur dans la fenêtre d'auto complétion : error : there was a proble with the query.
a force de réflexion j'ai supprimer la base de données et la page m'affiche toujours le même message. je pense donc qu'il s'agit d'un problème de connexion a la base alors que j'ai bien remplie le fichier configuration.
NEED HELP PLEASE

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Autocompletion Ajax sur plusieurs champs dans un formulaire [ par barney06 ] Bonjour,Je suis entrain d'utiliser l'autocompletion (lorsque l'on tape une entrée dans un champs de formulaire, les résultats trouvés par l'entrée, s' Formulaire dynamique [ par alphacrash ] Salut à tous, je vous explique mon problème :Je récupère le contenu d'une chaîne, par exemple celle-ci :$chaine="&lt;html&gt;&lt;body&gt;&lt;input typ Passage de parametres d'un formulaire d'un popup à un formulaire d'un page parent [ par toomsbzh ] Bon décidement je sais jamais où rééllement poster mes questions... BrefDésolé pour le titre du sujet extra long mais peut pas faire plus court.Donc t La base de données mysql sur mambo [ par alexpoeuf ] bonjour &#224; tous, j'ai besoin de creer un formulaire qui sera directement envoy&#233; sur mysql. j'ai cr&#233;e un formulaire type, une base de do ajax and listbox [ par nvinvinvi ] j'ai un formulaire avec 2 listbox (catégorie/sous catégorie) la listbox sous catégorie est construite en fonction du choix fait dans la première. P formulaire AJAX [ par TomSoyer ] Bonjour à tous.Je suis programmeur débutant et j'aimerais bien faire un formulaire en AJAX avec des radio boutons et quand un clic sur 1 de ces radio Formulaire Ajax [ par bibo06 ] Bonjour, je n'ai jamais fais de script Ajax encore, mais j'ai besoin d'un formulaire interactif un peu spéciale.J'ai fait quelque recherche sur divers Comment modifier une base de donnée Mysql avec AJAX [ par overstone ] Bonjour,Je recherche un moyen simple pour gérer ma base de donnée avec AJAX J'ai réussi à créer mon interface à l'aide de PHP, tout marche parfaitemen PopUp ajax lors de l'envoi de formulaire [ par newsmatique ] Bonjour,j'ai un formulaire, qui m'envoi des données en GET sur la page traitement.php, je voudrais que lors de l'envoi de ce formulaire cela m'ouvre u Problème formulaire [ par hourad ] Bonjour à tous,J'ai un petit problème avec AJAX.Voilà, je l'utilise pour à chaque changement d'option dans une liste, ça change un formulaire en desso


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,390 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.