begin process at 2010 03 17 01:05:06
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

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

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


 Information sur la source

Note :
4,6 / 10 - par 5 personnes
4,60 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :ajax, formulaire, mysql, classe, autocompletion Niveau :Initié Date de création :15/10/2007 Vu / téléchargé :20 052 / 1 635
Auteur : phpajax

Ecrire un message privé
Commentaire sur cette source (25)
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir
Source avec Zip Source avec une capture CLASSE AJAX : PROTOTYPE ROCKS ! par ralecul
Source avec Zip Source avec une capture UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners
Source avec Zip CLASSE AJAX COMPLÈTE par Arto_8000
AJAX - UN SEUL APPEL DE FONCTIONS POUR FAIRE DES LIENS ET SO... par Gwinyam

Commentaires et avis

Commentaire de jhd le 16/10/2007 10:08:27

bon exemple d utilisation de jquery

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 ?

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

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

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?

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 ?

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.

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

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

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.

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.

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

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

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 ;)

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

Commentaire de lanner le 22/11/2007 13:02:04

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

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.

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 !!!!

Commentaire de soundpanther le 22/05/2008 20:28:06 10/10

Non c'est tres bien

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++

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,





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++

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

Commentaire de damien78450 le 29/04/2009 16:47:12

j'aime le code , mais je un problème mais quand je tape quelque chose , l'affichage est en noir .... que faire ?

Commentaire de Rderoit le 20/06/2009 22:29:35 10/10

OUI, mais pour les vénères vous êtes tous des pompeurs de quelqu'un à la base!!!

Merci, mec sans toi je l'aurais surement pas trouver merci encore!!!

10/10

 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

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

  
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,499 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)