Discussion :

[gilles40]

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

[Spartacusply]

Ne réinvente pas la roue, pour faire de l'autocomplétion facilement je te conseil le widget jquery-ui autocomplete.

[gilles40]

Bonjour,

merci Spartacusply pour la suggestion de jqury ui, j'ai mis ca en place tout fonctionne a peu pres sauf que lorsque j'entre ma donnees dans le champs affecté par Autocomplete je n'arrive pas a avoir une selection en fonction de ce que je saisi j'ai essayer de mettre le :term dans ma requete sql mais cela ne fonctionne pas je met mon code au cas ou tu aurai une idee.

merci d'avance

Gilles


le JS:

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
$("#immat").autocomplete({
    minLength: 1,
    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);
        $('#marque').val(ui.item.marque);
        $('#modele').val(ui.item.modele);
    }
});

le php:

Code php :

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
<?php
include '../lib/includes.php';
include '../partials/header.php';
/**
 * Recherche des agences
 */
$select = $db->query("SELECT * FROM agences");
$agences = $select->fetchAll();
$agences_list = array();
foreach($agences as $agence){
    $agences_list[$agence->id] = $agence->name;
}
 
/**
 * Recherche des vehicules pas arrivés
 */
$select = $db->query("SELECT vehicules.id, vehicules.immat, vehicules.chassis, vehicules.mva, typesmines.marque, typesmines.modele FROM typesmines LEFT JOIN vehicules ON typesmines.id = vehicules.typesmine_id");
$results = $select->fetchAll();
 
$datas = array();
    foreach($results as $result){
            $datas[] = array(
            'id' => $result->id,
            'immat' => $result->immat,
            'mva' => $result->mva,
            'chassis' => $result->chassis,
            'marque' => $result->marque,
            'modele' => $result->modele,
            'label' => $result->immat,
            'value' => $result->immat
         );
    }
 
if (!empty($_GET['q'])) {
    ob_get_clean();
    die(json_encode($datas));
}
 
?>
            <h1>Saisie date arrivée en agence</h1>
            <hr>
            <form method="post" action="" class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="immat">Immatriculation :</label>
                    <div class="col-sm-2">
                        <?= input('immat'); ?>
                    </div>
                    <label class="control-label col-sm-2" for="mva">Mva :</label>
                    <div class="col-sm-2">
                        <?= input('mva'); ?>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="marque">Marque :</label>
                    <div class="col-sm-2">
                        <?= input('marque'); ?>
                    </div>
                    <label class="control-label col-sm-2" for="modele">Modèle :</label>
                    <div class="col-sm-2 disabled">
                        <?= input('modele'); ?>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="agence_id">Agence :</label>
                    <div class="col-sm-2">
                        <?= select('agence_id', $agences_list); ?>
                    </div>
                    <label class="control-label col-sm-2" for="date_arrivee">Date Arrivée :</label>
                    <div class="col-sm-2">
                        <input type="text" name="date_arrivee" id="datepicker" value="" class="form-control" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="comment">Commentaires :</label>
                    <div class="col-sm-6">
                        <?= textarea('comment'); ?>
                    </div>
                </div>
            </form>
        </div>