IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

afficher une liste lors du click dans un input


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 75
    Par défaut afficher une liste lors du click dans un input
    Bonjour.

    Je suis un peu débutant en javascript et je cherche a faire quelque chose dans le même genre que ce site la .Lorsque l'on clic sur le champ input de "From" ou de "To" et bien cela nous affiche une longue liste de champ dont les résultats se limitent au fur et a mesure que l'on entre le nom désiré.

    Voila en espérant avoir été assez clair;

    Merci.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Une autocompletion quoi ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 75
    Par défaut
    ouai ca ressemble pas mal a ce que je veux faire ^^.
    Merci je vais plancher la dessus

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 75
    Par défaut
    Vraiment bien fait ce tuto .

    Cependant J'ai un problème avec la fonction generateOptions que voici :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    function generateOptions($debut,$liste) {
        $MAX_RETURN = 10;
        $i = 0;
        foreach ($liste as $element) {
           if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) {
                echo(utf8_encode("<option>".$element."</option>"));
               $i++;
            }
        }
    }
    Avec cette fonction la complétion ne marche plus avec les valeurs que j'ai rentrées dans mon tableau (valeur du type "Minneapolis, MN (MSP) ",... a savoir que j'ai plus de 3500 valeur dans mon tableau)

    la complétion remarche lorsque je modifie la fonction generateOptions de mon fichier php

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    function generateOptions($debut,$liste) {
        foreach ($liste as $element) 
    	{
    		echo(utf8_encode("<option>".$element."</option>"));
        }
    }
    Mais j'ai encore quelques souci a savoir que la toutes les valeur de mon tableau s'affichent (et avec + de 3500 valeur vla la page que ca fait ^^). du coup j'ai beau saisir par exemple Paris j'ai toujours cette foutue liste de 3500 valeurs (au lieu justement de n'afficher que les valeur qui commencent par un p) qui reste affichée .

    Quelqu'un aurait-il une idée d'ou pourrait venir le problème ? Je ne suis pas sur qu'il vienne de cette fonction mais j'ai suivi le tuto pas à pas et mon fichier javascript ansi que ma page html sont les mêmes donc je ne pense pas que ca vienne de ces fichiers.

    Merci à ceux qui pourront m'aider

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 75
    Par défaut
    bon ben finalement j'ai trouvé une solution j'ai mis toutes les valeur de mon tableau en majuscule (car il s'agissait d'un problème de ce type le programme n'affichait pas ma liste de valeur lorsque celle-ci contenait des maj. et des min. j'ai pas compris pourquoi :X).

    J'ai cependant un autre petit problème :

    J'ai donc ma liste d'auto complétion qui marche et j'aimerai en rajouter une 2ème.Je modifie donc mon code html pour rajouter un formulaire une zone de saisie comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <form name="form-test" id="form-test" action="javascript:alert('soumission de ' + document.getElementById('champ-texte').value)" style="margin-left: 50px; margin-top:20px">
                <input type="text" name="champ-texte" id="champ-texte" size="50" autocomplete="off" />
                <input type="submit" id="bouton-submit">
            </form>
     
     
     
             <form name="form-test2" id="form-test2" action="javascript:alert('soumission de ' + document.getElementById('champ-texte2').value)" style="margin-left: 50px; margin-top:20px">
                <input type="text" name="champ-texte2" id="champ-texte2" size="50" autocomplete="off" />
                <input type="submit" id="bouton-submit2">
            </form>
    et ensuite je modifie ma zone de script en initialisant une 2ème fois ma fonction d'auto complétion comme ceci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <script type="text/javascript">
    window.onload = function()
    {
    	initAutoComplete(document.getElementById('form-test'),
    document.getElementById('champ-texte'),document.getElementById('bouton-submit'));
    	initAutoComplete(document.getElementById('form-test2'),
    document.getElementById('champ-texte2'),document.getElementById('bouton-submit2'));
    };
    </script>
    Et ce que je n'arrive pas a comprendre c'ets lorsque je test ma page avec mes 2 zones de saisie et bien il n'y en a plus qu'une qui marche (à savoir la 2ème).

    Quelqu'un pourrait-il m'expliquer comment ca ce fait (Peut-être que je n'ai pas le droit d'initialiser ma fonction 2 fois de suite :X je sais pas :X)?

    Merci.

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    75
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 75
    Par défaut
    quelq'un a-t-il une idée jme suis replonger dendans depuis ce soir et je ne vois pas pourquoi lorsque je met 2 champ cela ne mache plus .

Discussions similaires

  1. [Debutant] Afficher une List dans une JSF
    Par zaoueche dans le forum JSF
    Réponses: 4
    Dernier message: 23/11/2007, 16h38
  2. Réponses: 4
    Dernier message: 19/10/2006, 17h19
  3. Réponses: 3
    Dernier message: 11/05/2006, 00h27
  4. [VB]Afficher une liste dans une boite de dialogue
    Par Asdorve dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 05/04/2006, 11h30
  5. Afficher une dropdownlist lors de modif dans une DataGrid
    Par MiJack dans le forum C++Builder
    Réponses: 2
    Dernier message: 08/11/2004, 17h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo