Auto completion sur champs texte

Télécharger le projet
Commenter

Description

Voici un code qui permet d'intégrer un champs texte qui se complète automatiquement (via Ajax) au fur et à mesure de votre saisie.
Un bout de code PHP va chercher une liste de valeur (base SQL, repertoires, fichiers, XML, Pages Web, etc ...) et la renvoi à la page web qui vous propose une completion en rapport avec votre saisie.

Démo visible ici : http://www.coopmcs.com/demo/completion/completion.html

Source / Exemple : 


<html>
<head>
<title>Auto complete (auto completion)</title>
<!-- appel du script d'auto completion -->
<script language="JavaScript" src="completion.js"></script>

<script language="JavaScript">
<!--
	// nombre de caractere minimum à tapé avant de lancer la recherche Ajax
	var minimum_caractere = 1;
	// on se moque la hauteur de case
	var case_sensitive    = 0 ;
//-->
</script>
</head>
<body>

<br><br><br>

<!-- debut du code HTML -->
<!-- déclaration du formulaire -->
<form name="completion_form" method="POST" action="une_action.html">

<!-- obliger de laissé un autre champs text invisible pour pallier a la gestion de la touche entrée sur les formulaires -->
<INPUT TYPE="text" NAME="dummy" value="dummy" style="display:none;">

<!-- déclaration du champs dans lequel on va tapé sa recherche -->
Auto completion : <input	type="text"
							class="texte"
							id="completion_text"
							name="completion_text"
							onkeyup="recup_email(event);"
							autocomplete="off">
<BR>
<!-- délacaration du SELECT a choix unique pour la completion -->
<select id="completion_select"
		name="completion_select"
		size="1"
		onclick="recup_mail_click();"
		style="margin-left:110px;border:solid 1px black;border-top:none;display:none;"></select>

<BR>
<input type="button" onclick="completion_form.submit();" value="Envoyer">
<!-- fin du code HTML -->

</form>
</body>
</html>

Conclusion :


Fonctionne avec IE et Firefox (pas testé sur les autres navigateurs).
Necessite PHP + Javascript (fonctionne avec Ajax)

- On peut choisir de respecter la hauteur de case ou pas
- On peut choisir à partir de combien de caractère on lance la recherche.

Amusez vous bien.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (ryosama)