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
SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|