Recherche Autocomplete sur Open Street Map (OSM)

18 Juil Recherche Autocomplete sur Open Street Map (OSM)

Dans cet article on va faire un formulaire  de recherche autocomplete sur les emplacement avec Open Street Map, on utilisant l’API du Photon

<?php
/* 
Fichier ajaxSearch.php 
Pour la récuperation des données lors de saisie d'une recherche
*/
if(!empty($_POST['content'])){
    $url = addslashes(htmlentities($_POST['content']));
    $url = urlencode($url);
    /* On fait l'encodage du texte récupérer du $_POST sous forme d'URL */
    $json = file_get_contents('http://photon.komoot.de/api/?q='.$url);
    /* Photon.komoot.de/api est l'API qu'on va l'utiliser */
    $obj = json_decode($json);
    foreach($obj->features as $valeur){
        $coordonnes = $valeur->properties;
        echo '<p class="pSearch" title="'.$coordonnes->name.' - '.$coordonnes->city.' - '.$coordonnes->postcode.' - '.$coordonnes->country.'">- '.$coordonnes->name.' - '.$coordonnes->city.' - '.$coordonnes->postcode.' - '.$coordonnes->country.'</p>';
    }
}else{
    echo "Veuillez saisir votre recherche !";
}

Ce script si dessous est pour le faite qu’on saisie un mot sur le champs de recherche on fait un appel ajax a notre fichier ajaxSearch.php en dessous

<script type="text/javascript">
        jQuery(document).ready(function(){
            /* SEND MAIL */
            jQuery("#form-contact-submit-mail").click(function(e){
                jQuery("#form-status-mail").removeClass().addClass('messagebox').fadeIn(1000);jQuery("#form-status-mail").html('<div class="alert alert-default" style="background:#fff;font-size:12px;"><img src="assets/img/loading.gif" style="width:15px;" alt="loader" />&nbsp;S\'il vous plaît, attendez ..</div>');
                var Data = jQuery("#form-contact-mail").serializeArray();
                jQuery.ajax({
                    url : "core/ajax/ajaxMailContact.php",
                    type: "POST",
                    data : Data,
                    success:function(data, textStatus, jqXHR){
                        jQuery('#form-status-mail').html(data);
                    }
                });
                jQuery("#form-status-mail").slideDown("slow"); e.preventDefault();
            });
            /* SEARCH OSM */
            jQuery('.recherchejQueryMenu').keyup(function(){
                var getValue = jQuery(this).val();
                jQuery.ajax({
                    url: 'core/api-osm/index.php',
                    type: "POST",
                    data: (
                        {content: getValue}
                    ),
                    success: function(data){
                        jQuery('.contentRefresh').show();
                        jQuery('.contentRefresh').html(data);
                        jQuery('.pSearch').click(function(){
                            var getTitle = jQuery(this).attr('title');
                            jQuery('.recherchejQueryMenu').val(getTitle);
                        });
                    }
                });
            });
        });
            
        </script>

Cette partie si dessous est le formulaire de recherche

<form role="form" id="form-subscribe" autocomplete="off" method="post" action="General-quote" class="animate from-bottom">
    <div class="input-group large">
        <input type="text" class="form-control recherchejQueryMenu" autocomplete="off" placeholder="Adresse" required="" name="adresse" />
        <div class="contentRefresh"></div>
        <span class="input-group-btn"><button class="btn btn-primary" type="submit">Valider</button></span>
    </div>
</form>