CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:20:38

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 951 membres
8 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 045 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

AUTO COMPLETION SUR CHAMPS TEXTE

Information sur la source

Catégorie :Formulaire Classé sous : completion, auto, complete, ajax Niveau : Initié Date de création : 17/01/2007 Date de mise à jour : 21/11/2008 18:58:53 Vu / téléchargé: 19 030 / 2 113

Auteur : ryosama

Ecrire un message privé

Note :

6,83 / 10

Commentaire sur cette source (16)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<html>
<head>
<title>Auto complete (auto completion)</title>
<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>
<form name="completion_form" method="POST" action="une_action.html">
<INPUT TYPE="text" NAME="dummy" value="dummy" style="display:none;">
Auto completion : <input type="text"
class="texte"
id="completion_text"
name="completion_text"
onkeyup="recup_email(event);"
autocomplete="off">
<BR>
<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">
</form>
</body>
</html>

<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.

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ajax.php 4 701 octets
completion.html 1 428 octets
completion.jpg 7 848 octets
completion.js 2 282 octets

Télécharger le zip

Historique

17 janvier 2007 16:16:03 :: correction orthograpique
21 novembre 2008 18:58:53 :: Changement d'url de la démo

Sources du même auteur

FONDU ENCHAINER ENTRE PLUSIEURS IMAGES

SELECTION DE VALEURS A PARTIR DE 2 LISTES À CHOIX MUPLIPLES

EFFET DOCK MAC OS POUR VOS MENUS

Toutes les sources de ryosama

Sources de la même categorie

CALCULS RAYNAUX V2 par Ali Bibi

VALIDATION D'UN FORMULAIRE par grarestephane

CHAT VIRTUEL par grarestephane

AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

MOTEUR DE RECHERCHE SANS PHP par jdmcreator

ALBUM PHOTO AVEC PARTIE ADMINISTRATION - PHP + AJAX + XML par tinokoxx

DYNAMIC CONTENT DANS UNE DIV par duterte

UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

CLASSE AJAX : PROTOTYPE ROCKS ! par ralecul

Commentaires et avis

Commentaire de ptt le 18/01/2007 11:06:49

Salut ta demo ne marche pas ^^

Commentaire de ryosama le 18/01/2007 11:10:26

Je viens de retester la démo sur Firefox 1.5 et IE 6, elle marche sans probleme.
Je n'ai aucun soucis.

Commentaire de Sipadan le 19/01/2007 22:26:30

Je confirme, marche sous ie et firefox.

Commentaire de yukhaa le 25/01/2007 15:14:36

Tu peux montrer commen tu fais dans le cas où les données sont dans une base SQL

Commentaire de younes371 le 31/01/2007 10:20:10

YUKHAA, suite a ta demande , aller voir ceci :
http://www.j0k3r.net/ajax-une-autocompletion-avancee-en-ajax-6.html
et pour le Demo, c'est ici :
http://www.j0k3r.net/exemples/ajax/autocompletion.php

Commentaire de nihaoma le 02/02/2007 14:34:12

bonjour
y aurait-il moyen de faire en sorte que ta fenetre de proposition apparaisse non pas au début du champ, mais callée sur le dernière caractère saisi ? je m'explique, dans le cas que tu as en démo, ca n'aurait pas beaucoup d'interet, mais si par exemple je modifie ton script pour faire en sorte qu'il me propore une list de choix pour chaque mot d'une phrase que je suis en train de tapper, ca serait bien que la fenetre apparaisse au dessus du mot en cours et non pas systématiquement au debut du champ

merci
NiHaoMa

Commentaire de yukhaa le 13/02/2007 15:13:23

Malgré mesefforts je n'y arrive toujours pas si on pouvait m'aider j'apprécierai

Commentaire de papi44 le 27/06/2007 15:50:07

Bien, court, adaptable: bref ce que je cherchais.
Merci

NB: juste une petite remarque. Visiblement il s'agissait à la base de complétion sur des imels !!! la lecture du code (bien que bien commentée) aurais été plus simple à comprendre pour des débutants si les termes d'imels avaient été remplacées par ... "fruits" ... par exemple. :)

Commentaire de stay le 23/07/2007 11:57:45

J’ai remarqué un bug après avoir tapé la lettre « a » sur Explorer.

PS : Merci pour ce code cour, ingénieux et réutilisable :-)

Commentaire de ryosama le 23/07/2007 13:35:47

En effet, il y a un bug sous IE avec la lettre 'a'. Pas le courage de regarder pourquoi. IE bien qu'encore majoritaire chez les internautes est effacé de mon oridnateur depuis longtemps ;-)
Vivement que ce naviguateur préhistorique est disparu de la toile !

Commentaire de cdamour le 24/07/2007 14:46:46

Dommage qu'il y est tous ces bugs sous IE,
plusieurs lettres ne fonctionne pas correctement comme p

Commentaire de forochel le 29/05/2008 21:00:25 8/10

Bon code, tres facile a mettre en place

J'ai eu des soucis pour ce qui est des caractères accentués, mais tout ca ce regle facilement via un header() a placer dans ajax.php (pour préciser l'ISO-8859-1)

Pour les tres longue chaines de caractères, ca bug un poil sous IE, alors je place le select dans une DIV, overflo:auto, et le tour et joué

Merci pour ce script bien sympa

Commentaire de alte94 le 10/08/2008 16:47:40

Bon code, fonctionne impec après qq modifs syntaxiques (short tag par exemple).
Par contre, impossible de remplacer le tableau statique par interrogation d'une base de donnée !?
La moindre modif dans ajax.php bloque immédiatement le fonctionnement du script. Rien compris même si mes connaissances en php sont limitées.

C'est bien dommage parce que ça enlève tout intérêt à la chose. Si qqun a trouvé pourquoi, je suis preneur.

Commentaire de bartmaul3000 le 12/01/2009 13:45:35 7/10

Lorsque l'on effectue une recherche, je souhaiterai que la recherche de la première lettre tapée dans la ZDT se face sur les mots en majuscules et minuscules.

Par exemple : "e" propose "Elephant", mais aussi "energie"

Or avec le code actuel on obtient seulement "energie" toujours avec le même exemple...

merci d'avance ;)

Commentaire de ryosama le 12/01/2009 14:14:35

Dans le javascript

var case_sensitive = 0 ;

Commentaire de bartmaul3000 le 13/01/2009 15:57:35

Merci ça fonctionne impec ;)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Auto completion [ par vince1303 ] Bonjour,Dans un formulaire, j'ai un Textbox qui peut être rempli soit manuelement, soit par du code asp.net. Lorsqu'on remplit ce champ manuelement, l ajout d'enregistrement [ par rudybiss ] Bonjour!!!Je suis en train d'apprendre ajax et j'aimerais savoir comment ajouter des enregistrements à ma base de données avec ajax sans recharger la FireFox 3 + Ajax = bug ? [ par rhan_659 ] Bonjour à tous Je suis face à un bug désopilant, un code en ajax qui fonctionne sous FF2 mais pas sous FF3 voila le code que j'utilise requete = Mon defilement d'images en ajax fonctionne sous IE mais pas FIREFOX [ par VBFRANCE ] Thierry Ajouter un preload au chargement d'un div [ par renaud2006 ] Bonjour, voila j'utilise une simple fonction de chargement de div en javascript , le petit soussis c'est que j'aimerai y rajouter un préload de charge Ajax, loader une page externe [ par Annadrill ] voila je cherche a transformer cette fonction qui fonctionne avec prototype et scriptaculous: function loadIng(divTarget,divUrl){new Effect.Fade(div rafraichissement page [ par rudybiss ] Bonjour!!! Voila,je developpe un site en ajax+php et tout vas bien jusque là.Mon problème,est que j'ai sur la meme page j'ai un tableau qui affiche Menu Déroulant Ajax [ par Catalarem ] Alors ben tout d'abord un grand merci à cette fabuleuse communauté qui je le sens (depuis que je me suis enfin convaincu moi même que le bon vieux HTM Internet explorer et la recupération de function javascript [ par banbanfr ] Bonjour à tous,Voilà j'ai un petit problème existentiel. lolJe bosse sur un projet qui est tout en AJAX et drag n drop jusque là tout va bien.Mon prog Activer/Désactiver un bouton Submit avec Ajax [ par nabmoah ] Bonjour ...j'ai récupéré un code AJAX pour l'installer dans l'une de mes pages Web pour un éventuel moteur de recherche.Bien sure, comme c'est de l'aj