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

Soyez le premier à donner votre avis sur cette source.

Vue 32 867 fois - Téléchargée 3 017 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

cs_jhd
Messages postés
339
Date d'inscription
mardi 13 août 2002
Statut
Membre
Dernière intervention
29 novembre 2007
-
bon exemple d utilisation de jquery
mehdib92
Messages postés
1
Date d'inscription
dimanche 4 février 2007
Statut
Membre
Dernière intervention
16 octobre 2007
-
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 ?
stfrouille
Messages postés
5
Date d'inscription
mercredi 10 janvier 2007
Statut
Membre
Dernière intervention
16 octobre 2007
-
C'est bizarre comme ca ressemble étrangement a ca .....

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

meme design, meme code......hum hum
cs_spoonisback
Messages postés
72
Date d'inscription
vendredi 14 mai 2004
Statut
Membre
Dernière intervention
5 février 2010
-
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
phpajax
Messages postés
27
Date d'inscription
lundi 8 octobre 2007
Statut
Membre
Dernière intervention
17 octobre 2007
-
le but c'est de la partager avec tout le monde, et je pense que cette source te sera utile npn?

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.