easyautocomplete - Retour php en json

**fiston** · 27/02/2021, 19h39

Bonjour à tous,

je suis novice sur le développement.

Je planche sur un petit module qui permet d'afficher des tarifs sur un itinéraire recherché dans un input.

J'utilise le script easyautocomplete.

Lors de la recherche dans le input, je n'arrive pas à lire mon json généré dans avec php.

Est ce que quelqu'un pourrait m'éclairer ?

Merci beaucoup.

Voici mon

Code html :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
 
    <title>Calculateur de prix FlexiPass</title>
 
    <!-- icon https://fontawesome.com -->
    <link href="css/fontawesome.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"
        type="text/css">
    <!-- CSS file -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/easy-autocomplete.min.css">
    <!-- Additional CSS Themes file - not required -->
    <link rel="stylesheet" href="css/easy-autocomplete.themes.min.css">
    <!-- HTML5 shim et Respond.js pour IE8 permettent la compatibilité avec le HTML5 et les media queries -->
    <!-- Attention : Respond.js ne fonctionne pas en local via le protocole file:// -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
 
 
<body>
    <!--<div class="spinner-grow" role="status"  id="chargement">
            <span class="sr-only">Chargement...</span>
        </div>-->
    <div class="container-fluid">
        <div class="row justify-content-center text-center">
            <div class="col-12 col-sm-12 col-md-9 p-2">
                <h2 class="text-center text-uppercase m-4">Calculez vos économies avec le Flexi'Pass :</h2>
            </div>
        </div>
        <div class="row justify-content-center text-center">
            <div class="col-12 col-sm-12 col-md-9 p-2">
                <div class="input-group input-group-lg text-center">
                    <div class="input-bug input-group-lg">
                        <input type="text" id="inputRecherche" class="form-control"
                            placeholder="Recherchez votre itinéraire">
                        <div class="input-group-append">
                            <button id="reset" class="btn btn-outline-secondary btn-alert-danger" type="button">
                                <i class="far fa-window-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="input-bug input-group-lg">
                        <small class="form-text text-muted" style="margin: auto;">Tapez votre gare de départ et votre
                            gare d'arrivée séparée par un espace.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="affich-prix">
        <div class="container-fluid">
            <div class="row justify-content-center text-center">
                <div class="col-12 col-sm-12 col-md-6 p-2">
                    <h4 class="text-center" id="itineraire">titre</h4>
                </div>
            </div>
            <div class="row justify-content-center text-center">
                <!-- Card prix m26 -->
                <div class="col-6 col-sm-6 col-md-3 p-2" id="cardm26">
                    <div class="card h-100 p-2">
                        <img class="card-img-top" src="images/normandie-m26.png" />
                        <h5 class="card-title">Abonnement mensuel</h5>
                        <p class="card-text">Sans Flexi'Pass :<br><span id="m26prixnormal"
                                class="badge badge-secondary"></span></p>
                        <p class="card-text">Avec Flexi'Pass :<br><span id="m26prixflexi"
                                class="badge badge-success"></span></p>
                    </div>
                </div>
                <!-- Card prix p26 -->
                <div class="col-6 col-sm-6 col-md-3 p-2" id="cardp26">
                    <div class="card h-100 p-2">
                        <img class="card-img-top" src="images/normandie-p26.png" />
                        <h5 class="card-title">Abonnement mensuel</h5>
                        <p class="card-text">Sans Flexi'Pass :<br><span id="p26prixnormal"
                                class="badge badge-secondary"></span></p>
                        <p class="card-text">Avec Flexi'Pass :<br><span id="p26prixflexi"
                                class="badge badge-success"></span></p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center text-center">
                <!-- Card prix paris 2nd -->
                <div class="col-6 col-sm-6 col-md-3 p-2" id="cardparis2">
                    <div class="card h-100 p-2">
                        <img class="card-img-top" src="images/normandie-paris.png" />
                        <h5 class="card-title">Abonnement mensuel</h5>
                        <p class="card-text">Sans Flexi'Pass :<br><span id="parisprixnormal2"
                                class="badge badge-secondary"></span></p>
                        <p class="card-text">Avec Flexi'Pass :<br><span id="parisprixflexi2"
                                class="badge badge-success"></span></p>
                    </div>
                </div>
                <!-- Card prix paris 1ere -->
                <div class="col-6 col-sm-6 col-md-3 p-2" id="cardparis1">
                    <div class="card h-100 p-2">
                        <img class="card-img-top" src="images/normandie-paris.png" />
                        <h5 class="card-title">Abonnement mensuel</h5>
                        <p class="card-text">Sans Flexi'Pass :<br><span id="parisprixnormal1"
                                class="badge badge-secondary"></span></p>
                        <p class="card-text">Avec Flexi'Pass :<br><span id="parisprixflexi1"
                                class="badge badge-success"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Nous mettons les plugins Javascripts en bas de page pour optimiser les temps de chargement -->
    <!-- Plugin jQuery indispensable au bon fonctionnement de Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Les composants Jasvacripts de Boostrap -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <!-- JS file -->
    <script src="js/jquery.easy-autocomplete.min.js"></script>
    <script src="js/script.js"></script>
</body>
 
</html>

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
<?php
    header('Access-Control-Allow-Origin: *');
    header('Content-type: application/json');
 
    $counter = 0;
    // chemin d'accès à votre fichier JSON
    $file = 'tarif-flexipass-petit.json';
    // mettre le contenu du fichier dans une variable
    $data = file_get_contents($file);
    // décoder le flux JSON
    $obj = json_decode($data);
    // accéder à l'élément approprié
    //if (!empty($_GET['a']) && !empty($_GET['b']))
 
    if (!empty($_GET['recherche']))
    {
        foreach ($obj as $v) {           
            //if ($_GET['a'] == $v->a && $_GET['b'] == $v->b)
            //echo strcasecmp($_GET['recherche'],$v->a);
            $marecherche = $v->a;
            $findme = strtoupper($_GET['recherche']);
            $pos = strpos($marecherche, $findme);
            //echo $marecherche;
 
            if ($pos !== FALSE)
            {
                $counter++;
 
                echo json_encode( $v );
            }
        }
        if ($counter == 0) {
            echo "Ancune résultat";
        }
    } else {
        echo "Ancune recherche lancé";
    }   
?>

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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
var options = {
 
    url: function (recherche) {
        return "api.php?recherche=" + recherche + "";
        //return "api.php?recherche=" + recherche + "";
    },
    ajaxSettings: {
        dataType: "jsonp"
    },
    getValue: "a",
    minCharNumber: 3,
    list: {
        onLoadEvent: function () {
            //console.log($("#inputRecherche").val());
        },
        onChooseEvent: function () {
            var od = $("#inputRecherche").getSelectedItemData().a + " <> " + $("#inputRecherche").getSelectedItemData().b;
            var p26prixnormal = $("#inputRecherche").getSelectedItemData().d;
            var p26prixflexi = $("#inputRecherche").getSelectedItemData().e;
            var m26prixnormal = $("#inputRecherche").getSelectedItemData().f;
            var m26prixflexi = $("#inputRecherche").getSelectedItemData().g;
            var parisprixnormal2 = $("#inputRecherche").getSelectedItemData().h;
            var parisprixflexi2 = $("#inputRecherche").getSelectedItemData().i;
            var parisprixnormal1 = $("#inputRecherche").getSelectedItemData().j;
            var parisprixflexi1 = $("#inputRecherche").getSelectedItemData().h;
 
            console.log(parisprixnormal1);
            $("#itineraire").text(od);
            if (p26prixnormal == 0 || p26prixflexi == 0) {
                $("#cardp26").remove();
            } else {
                $("#p26prixnormal").text(p26prixnormal + "€");
                $("#p26prixflexi").text(p26prixflexi + "€");
            }
            if (m26prixnormal == 0 || m26prixflexi == 0) {
                $("#cardm26").remove();
            } else {
                $("#m26prixnormal").text(m26prixnormal + "€");
                $("#m26prixflexi").text(m26prixflexi + "€");
            }
            if (parisprixnormal2 == 0 || parisprixflexi2 == 0) {
                $("#cardparis2").remove();
            } else {
                $("#parisprixnormal2").text(parisprixnormal2 + "€");
                $("#parisprixflexi2").text(parisprixflexi2 + "€");
            }
            if (parisprixnormal1 == 0 || parisprixflexi1 == 0) {
                $("#cardparis1").remove();
            } else {
                $("#parisprixnormal1").text(parisprixnormal1 + "€");
                $("#parisprixflexi1").text(parisprixflexi1 + "€");
            }
 
            //console.log("p26prixnormal:" + p26prixnormal);
 
                $("#affich-prix").fadeIn("slow");
            $("#affich-prix").css("visibility", "visible");
            $("#inputRecherche").val("");
        },
        showAnimation: {
            type: "fade", //normal|slide|fade
            time: 400,
            callback: function () { }
        },
        maxNumberOfElements: 10,
        sort: {
            enabled: true
        },
        match: {
            enabled: true,
            caseSensitive: false,
            method: function (element, saisie) {
                var regex = /[A-Za-z]/g;
                var elementnettoye = element.match(regex);
                var saisienettoye = saisie.match(regex);
                var resultat = elementnettoye.toString().toLowerCase().includes(saisienettoye.toString().toLowerCase());
                //console.log("match:" + saisie);
 
                if (resultat) {
                    return true;
                } else {
                    return false;
                }
            }
 
        }
    }
};
 
$("#inputRecherche").easyAutocomplete(options);
 
$("#reset").click(function () {
    $("#inputRecherche").val("");
    $("#affich-prix").fadeOut("slow");
});
 
jQuery(document).ready(function ($) {
    $("#inputRecherche").val("");
});
 
String.prototype.sansAccent = function () {
    var accent = [
        /[\300-\306]/g, /[\340-\346]/g, // A, a
        /[\310-\313]/g, /[\350-\353]/g, // E, e
        /[\314-\317]/g, /[\354-\357]/g, // I, i
        /[\322-\330]/g, /[\362-\370]/g, // O, o
        /[\331-\334]/g, /[\371-\374]/g, // U, u
        /[\321]/g, /[\361]/g, // N, n
        /[\307]/g, /[\347]/g, // C, c
    ];
    var noaccent = ['A', 'a', 'E', 'e', 'I', 'i', 'O', 'o', 'U', 'u', 'N', 'n', 'C', 'c'];
 
    var str = this;
    for (var i = 0; i < accent.length; i++) {
        str = str.replace(accent[i], noaccent[i]);
    }
 
    return str;
}