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

Soyez le premier à donner votre avis sur cette source.

Vue 34 036 fois - Téléchargée 3 203 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
popaulkb Messages postés 6 Date d'inscription samedi 8 décembre 2007 Statut Membre Dernière intervention 22 février 2011
22 févr. 2011 à 15:27
Bonjour à tous j'ai un message qui me dit fichier indefi quand j'ouvre le fichier JS
popaulkb Messages postés 6 Date d'inscription samedi 8 décembre 2007 Statut Membre Dernière intervention 22 février 2011
22 févr. 2011 à 15:25
le fichier jkerry ne souvre pas chezmoi quelqu'un peut me donner son contenu merci d'avance
cs_nossoctoruss Messages postés 126 Date d'inscription samedi 28 novembre 2009 Statut Membre Dernière intervention 9 juin 2013
14 nov. 2010 à 14:42
sa a l'air interessant!v voir ca
tonytigerlight Messages postés 1 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 25 juillet 2010
25 juil. 2010 à 17:49
Déjà le fichier .sql est faux, tu crée une table pays et tu rentre des données dans une table countries....
pazticci Messages postés 7 Date d'inscription lundi 21 février 2005 Statut Membre Dernière intervention 22 juillet 2010
22 juil. 2010 à 01:35
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.