Ajax : completer automatiquement un formulaire (<input type=text>) php et base mysql , à voir absolument !

Soyez le premier à donner votre avis sur cette source.

Vue 33 261 fois - Téléchargée 3 095 fois

Description

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
6
Date d'inscription
samedi 8 décembre 2007
Statut
Membre
Dernière intervention
22 février 2011

Bonjour à tous j'ai un message qui me dit fichier indefi quand j'ouvre le fichier JS
Messages postés
6
Date d'inscription
samedi 8 décembre 2007
Statut
Membre
Dernière intervention
22 février 2011

le fichier jkerry ne souvre pas chezmoi quelqu'un peut me donner son contenu merci d'avance
Messages postés
126
Date d'inscription
samedi 28 novembre 2009
Statut
Membre
Dernière intervention
9 juin 2013

sa a l'air interessant!v voir ca
Messages postés
1
Date d'inscription
dimanche 21 décembre 2008
Statut
Membre
Dernière intervention
25 juillet 2010

Déjà le fichier .sql est faux, tu crée une table pays et tu rentre des données dans une table countries....
Messages postés
7
Date d'inscription
lundi 21 février 2005
Statut
Membre
Dernière intervention
22 juillet 2010

salut à tous,

en utilisant la source sur une liste de ville, j'ai un problème. Le nom des villes ressort avec un point d'interrogation au lieu d'un é ou un à ou un è ... Comment faire pour remédier à tous cela ?

merci
Afficher les 32 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.