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

jQuery Discussion :

Script d'autocomplétion


Sujet :

jQuery

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau candidat au Club
    Inscrit en
    Juin 2013
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : Juin 2013
    Messages : 2
    Par défaut Script d'autocomplétion
    Bonsoir,

    j'ai une base de donnees ou je gere des vehicules, je recupere la liste des immatriculations dans un formulaire (champ select) via une requete sql, ce que je voudrai faire c est que lorsque je selectionne une immatriculation les donnes liées a celle-ci remplissent automatiquement les autres champs de mon formulaire c'est a dire le chassis, la couleur, les kms sans rafraichir la page web, j'aimerai utliser le principe AutoComplétion est-ce possible? comment faire pour l'adapter avec mon select? j'avoue je suis un peu perdu!!!!

    merci par avance de votre aide.

    Gilles

    Bonjour,

    voila j ai un peu avancé mais je n arrive pas a avoir les donnees comme vous les avez, je mets mon code dessous et la page qui s'affiche:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
     
    <?php
    include '../lib/includes.php';
     
    $select = $db->query("SELECT id, immat, mva, chassis FROM vehicules");
    $vehicules = $select->fetchAll();
    $datas = array();
    foreach($vehicules as $vehicule){
    $datas = array(
        'immat' => $vehicule->immat,
        'mva' => $vehicule->mva,
        'chassis' => $vehicule->chassis
        );
    }
     
     
    /*$datas = array(
        array(
            'id' => 1,
            'last_name' => 'Truc',
            'first_name' => 'Pierre',
            'email' => 'pierre.truc@gmail.com',
            'label' => 'Pierre Truc',
            'value' => 'Truc',
        ),
        array(
            'id' => 2,
            'last_name' => 'Machin',
            'first_name' => 'Paul',
            'email' => 'paul.machin@gmail.com',
            'label' => 'Paul Machin',
            'value' => 'Machin',
        ),
        array(
            'id' => 3,
            'last_name' => 'Bidule',
            'first_name' => 'Philipphe',
            'email' => 'philippe.bidule@gmail.com',
            'label' => 'Philipphe Bidule',
            'value' => 'Bidule',
        ),
    );*/
    if (!empty($_GET['q'])) {
        ob_get_clean();
        die(json_encode($datas));
    }
    include '../partials/header.php';
    ?>
                <h1>Autocomplete AJAX avec remplissage de champs</h1>
                <p class="alert alert-info">Seul le champ <strong>NOM</strong> déclenche l'autocomplete.
                    <br />Je ne respecte pas ce que vous écrivez car pas envie de faire une base de données, donc <b>vous pouvez écrire n'importe quoi</b> ! :></p>
                <form method="post" action="" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="immat">Immat</label>
                        <div class="col-sm-8">
                            <input type="text" name="immat" id="immat" value="" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="mva">Mva</label>
                        <div class="col-sm-8">
                            <input type="text" name="mva" id="mva" value="" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="chassis">Chassis</label>
                        <div class="col-sm-8">
                            <input type="text" name="chassis" id="chassis" value="" class="form-control" />
                        </div>
                    </div>
                </form>
            </div>
     
            <script src="../js/jquery.js"></script>
            <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
            <script src="../js/jqueryUI/jquery-ui.min.js"></script>
            <script>
                $("#immat").autocomplete({
                    minLength: 3,
                    source: function(request, response) {
                        $.ajax({// call AJAX
                            url: '<?php echo $_SERVER['PHP_SELF']; ?>',
                            type: "GET",
                            dataType: 'json',
                            data: 'q=' + request.term, // défini le terme à rechercher
                            async: true,
                            cache: true,
                            success: function(ac_data) {
                                response(ac_data); // On va ajouter le résultat au tableau des résultats d'Autocomplete
                            },
                            error: function(msg) {
                                alert('Une erreur est survenue.');
                            }
                        });
                    },
                    select: function(event, ui) { // Assigniation de la valeur des champs au select
                        $('#immat').val(ui.item.immat);
                        $('#mva').val(ui.item.mva);
                        $('#chassis').val(ui.item.chassis);
                    }
                });
            </script>
        </body>
    </html>
    je n'arrive pas a voir ce qui se passe au lieu d'afficher la liste des immat il me mets le dernier enregistrementj'ai essayer de mettre le tableau dans un foreach mais a ce moment là il ne m affiche plus les donnees mais il m'affiche 29 puces qui correspondent aux 29 enregistrements que j ai dans la base
    et mon l'affichage de la page web
    Images attachées Images attachées  

Discussions similaires

  1. [AJAX] Script d'autocomplétion jQuery
    Par Kiryto dans le forum jQuery
    Réponses: 3
    Dernier message: 27/05/2013, 20h09
  2. [AJAX] adaptation de script d'autocomplétion
    Par Melex dans le forum AJAX
    Réponses: 6
    Dernier message: 03/05/2010, 17h25
  3. [AJAX] Script autocomplétion Denis Cabasson
    Par olivier8064 dans le forum AJAX
    Réponses: 2
    Dernier message: 14/08/2009, 09h17
  4. [PSpad] Script autocomplétion et coloration syntaxique
    Par Invité dans le forum Autres EDI
    Réponses: 1
    Dernier message: 22/11/2008, 14h58
  5. utilisation des scripts d'autocomplétion
    Par gendalf37400 dans le forum Ruby on Rails
    Réponses: 5
    Dernier message: 14/06/2007, 14h48

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