1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Auto completion sur champs texte

Auto completion sur champs texte

Soyez le premier à donner votre avis sur cette source.

Vue 48 233 fois - Téléchargée 4 999 fois

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

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
mercredi 8 avril 2009
Statut
Membre
Dernière intervention
12 janvier 2011
Pour ceux pour qui ça ne marche pas (Bravo pour les autres)
// il vous faut installer un environnement local de serveur avec Apache, PHP et MySQL
// pour cela installez MAMP (pour MAC) easyPHP ou WAMP (pour PC) et placez votre site dans le htdocs, lancez MAMP (ou easyPHP ou WAMP) et voilà!
//Pourquoi ça marcherait pas????
Signaler
Messages postés
35
Date d'inscription
jeudi 19 février 2004
Statut
Membre
Dernière intervention
2 février 2009
Ou plus simple activer l'option "short_tag" dans votre configuration PHP.
Signaler
Messages postés
1
Date d'inscription
mardi 16 mai 2006
Statut
Membre
Dernière intervention
16 décembre 2010
Ceux pour qui ce script ne marcherait pas, ouvrez le fichier ajax.php et en première ligne, modifiez <? par <?php si vous programmez en PHP5.

Sachez toutefois que ce script utilise la balise <select ...></select> du HTML pour afficher les occurences selon vos saisie. C'est pas comme les autres qui utilisent
...
Signaler
Messages postés
2
Date d'inscription
mardi 15 mai 2001
Statut
Membre
Dernière intervention
2 février 2011
pour djnitro95

j'ai le même prb avec "emails = eval('(' + http.responseText + ')');"
sous mon serveur qui tourne avec php 5.3.3

alors que sur ma machine de dev avec php 5.2.6 cela marche nickel

précédemment le serveur tournais en 5.1 cela marchais aussi, c'est juste au passage à php 5.3.3 qu'est survenue l'erreur

il y'a donc un réel problème avec la fonction json d'une expression à évaluer sous php 5.3.3

et je n'arrive pas à trouver la solution pour corriger le tir

si avec ces infos qqun à une solution?

merci
Signaler
Messages postés
17
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
20 mai 2010
Script testé, tout fonctionne nickel :)
par contre, lorsque je l'ai transféré sur mon site, j'ai un petit bug :
Lorsque j'utilise les flèche pour choisir un item dans la sélection, si je clique sur enter pour choisir, le serveur va charger la page de résultat mais il garde uniquement les lettres que j'ai tapé et pas le mot complet de la sélection.

Par contre, si je clique sur la sélection (avec la souris et non plus avec la touche enter), tout fonctionne correctement sauf que la redirection ne se fait pas directement.
Afficher les 39 commentaires
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)