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