Accueil > > > AUTO COMPLETION SUR CHAMPS TEXTE
 AUTO COMPLETION SUR CHAMPS TEXTE
 Information sur la source
 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
- <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>
<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.
 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
 Sources de la même categorie
 Commentaires et avis
 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
|
Derniers Blogs
 [WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE?[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE? par JeremyJeanson
Avec la sortie de la RC de Visual Studio 2010, Microsoft a mis un peu les points sur leS i en ce qui concernait le passage d'arguments. Mais nous somme un certain nombre à avoir pris ce changement comme un coup dur. Pour résumer la situation : à la sortie...
Cliquez pour lire la suite de l'article par JeremyJeanson [RIA SERVICES] INCLUDE ET DOMAINDATASOURCE[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey
Dans un de mes articles précédents , j'avais parlé des DomainDataSource avec RIA Services dans le cas d'une interface Maître - Détail. Dans le même principe, je vais parler d'une autre manière de mettre en forme ce cas d'interface avec RIA Services. Et po...
Cliquez pour lire la suite de l'article par Audrey ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATIONZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice
Une des nouveautés de la version V 3.0 était l'apparition de l'onglet Social qui ne fonctionnait que si le MarketPlace était activé sur son poste. Cela limitait donc son intérêt, car hors du cadre commercial USA-CANADA, peu de monde trouva...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|