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

Ce site au démarrage

begin process at 2012 02 12 00:20:50

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

AUTO COMPLETION SUR CHAMPS TEXTE

Information sur la source

Note :

7,14 / 10

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é :36 176 / 3 609

Auteur : ryosama

Ecrire un message privé

Commentaire sur cette source (39)

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

Les Membres Club peuvent 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

LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER

PLUGIN JQUERY : PROGRESS BAR

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

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

MISE EN CACHE D'IMAGES AUTO [AJAX] par Allan007

RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau

DEUX MENU DÉROULANT LE PREMIER GÉNÈRE LE DEUXIÈME MENU par hakimastouri

EDITION D'UN CHAMP par macgile

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

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 ;)

Commentaire de Fighter777 le 14/09/2009 11:30:35

j'ai une erreur avec IE8 ... dans le javascript ligne 45

{ emails = eval('(' + http.responseText + ')');

quelqun aurait une idée ? XD

sinon script totalement paramétrable pour utiliser une BDD sql ;)

Commentaire de djnitro95 le 19/11/2009 08:30:36

J'ai juste une question, comment fait on pour que quand on fait envoyer sur un resultat cela nous renvoi vers une url.

Merci

Commentaire de djnitro95 le 19/11/2009 09:30:22

En fait ce que je veut c'est que selon ce qu'on choisit dans la liste il y est une variable du type http://www.monsitepointcom/codeMAVARIABLE
a savoir que la variable est exactement la même que celle rentré dans ajax.php

Commentaire de ryosama le 19/11/2009 09:51:17

Dans "recup_mail_click()"

var sel = document.completion_form.completion_select ;
document.localtion.href="http://www.monsitepointcom/code"+sel.options[sel.selectedIndex].value ;
sel.style.display = 'none';

Commentaire de ryosama le 19/11/2009 09:51:48

document.location.href
et non pas
document.localtion.href

Commentaire de djnitro95 le 19/11/2009 10:36:52

Salut et merci,
Mais ca ne fonctionne pas, la selection ne se fait plus dans le menu déroulant et l'url renvoyé est: http://monsitepointcom/une_action.html je pense que dans action et method il faut faire une modif mais laquelle?

Commentaire de djnitro95 le 19/11/2009 12:54:12

T'est plus la Ryosama?
Je galere pas mal, voici ma source modifiée:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Auto complete (auto completion)</title>


  <script language="JavaScript" src="completion.js"></script>
  <script language="JavaScript">

  </script>
</head>

<body>

<br>

<br>



<form name="completion_form" method="GET" action="../html_sm/index_errorcodes_param_R2.htm">
  <input name="" style="display: none;" type="text">
Code erreur Delta : <input class="texte" id="completion_text" name="" onkeyup="recup_email(event);" autocomplete="off" type="text">
  <br>


  <select id="completion_select" name="" size="1" onclick="recup_mail_click();" style="border-style: none solid solid; border-color: -moz-use-text-color black black; border-width: medium 1px 1px; margin-left: 110px; display: none;">
  </select>

  <br>

  <input onclick="completion_form.submit();" value="Envoyer" type="button">
</form>

</body>
</html>

Le resultat que j'ai est http://monsitepointcom/html_sm/index_errorcodes_param_R2.htm?=&=chocolat&=chocolat
Alors que je voudrais http://monsitepointcom/html_sm/index_errorcodes_param_R2.htm?chocolat

Merci de ton aide

Commentaire de Fighter777 le 19/11/2009 19:35:53

moi j'ai pas reussi à le faire marcher, j'ai pris le script avancer qui marche au poil :)

http://www.phpcs.com/code.aspx?ID=40439

je l'ai coupler avec une base de donnée de 110 000 entrée et pas eu de problèmes

par contre conseiller, créer un fichier php pour la liste de mots car dans la base, il s'auto appel et j'avais pas vu ...

Commentaire de djnitro95 le 24/11/2009 10:52:07

Salut,

Désolé de revenir à la charge mais j'ai un souci, en local il y a une erreur au niveau du fichier completion.js a la ligne 46, je pense que le pb vient de la:
{ emails = eval('(' + http.responseText + ')'); // [id1,id2, ...]

Aidez moi svp j'ai une présentation à faire cet après midi.

Merci d'avance

Commentaire de ryosama le 24/11/2009 10:59:47

utilise la console d'erreur javascript livré avec Firefox pour débugger le problème (Outils -> console d'erreurs).
Comme précisez plus haut, ce script marche (avec Firefox en tout cas). S'il ne marche plus c'est que tu as modifié quelque chose que tu es le seul à connaitre.

Commentaire de djnitro95 le 24/11/2009 11:12:05

Non je pense pas car en local le script non modifié tout juste télécharger a le meme message d'erreur.

Commentaire de ryosama le 24/11/2009 11:31:06

tu as surement une erreur de php --> donc la valeur retourné n'est pas bonne donc
emails = eval('(' + http.responseText + ')'); est mal interprété.

Charge l'url :
http://localhost/.../ajax.php?what=completion1&val=<ce que tu veux chercher>

Regarde le message d'erreur.

Commentaire de djnitro95 le 24/11/2009 11:38:00

Merci Ryosama,
Peut tu etre un peu plus explicite sur l'endroit et le fichier de la modif stp

Commentaire de ryosama le 24/11/2009 11:42:41

Il ne faut pas modifier le fichier mais appeler l'url "http://localhost/.../ajax.php?what=completion1&val=<ce que tu veux chercher>" dans ton navigateur.

Tu auras peut être un message d'erreur qui t'en dira un peu plus sur où ce situe l'erreur dans le script ajax.php

Commentaire de djnitro95 le 24/11/2009 11:49:41

Bizarrement j'ai pas de message d'erreur, mais ets tu sur que le probleme ne viennent pas du fichier js au niveau de emails = eval('(' + http.responseText + ')')
Car l'erreur que IE me renvoi est a la ligne 46 et lorsque je supprime la 1ere ligne du fichier js l'erreur se retrouve a l igne 45 donc je suis quasi sur que l'erreur vient de la.
Quand je parle de local, je suis pour l'instant sur mon disque dur mais quand j'envoi sur mon ftp free ca fonctionne.

Commentaire de djnitro95 le 24/11/2009 13:06:24

Désolé d'insister mais personne n'a d'idées?

Commentaire de djnitro95 le 24/11/2009 14:07:58

Est ce que par hasard le fait que cela ne marche que sur serveur serais du au fait qu'il y a certaienement une requete sql?

Commentaire de djnitro95 le 24/11/2009 15:39:32

Bon bah merci quand meme.

Commentaire de rayman223 le 27/07/2010 16:51:51 9/10

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.

Commentaire de bbazot le 19/11/2010 14:32:02

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

Commentaire de arn224 le 16/12/2010 16:27:45

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

Commentaire de ryosama le 16/12/2010 16:31:19

Ou plus simple activer l'option "short_tag" dans votre configuration PHP.

Commentaire de micdum le 12/01/2011 13:01:15

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

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

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

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