Bibliothèque d'accès : Autocompletion avec parametres

Utilisation de la méthode Gp.Services.autoComplete() avec options de filtrage

by Géoportail IGNF

HTML

<script src="https://ignf.github.io/geoportal-access-lib/latest/dist/GpServices.js"></script>
<div id="params">
<p>Restriction spatiale :</p>
    <select id="territory">
        <option value="no">-Aucune-</option>
        <option value="METROPOLE">Métropole</option>
        <option value="DOMTOM">Outre-mer</option>
        <option value="01">Ain</option>
        <option value="20">Corse</option>
        <option value="30">Gard</option>
        <option value="75">Paris</option>
        <option value="974">La Réunion</option>
    </select>
<p> Type de localisants :
    <select id="type">
        <option value="PositionOfInterest">Toponymes</option>
        <option value="StreetAddress">Adresses</option>
    </select>
</p>
    <p>Localisant :
        <input type="text" id="location" onkeyup="suggest()"/>
    </p>
</div>
<div id="result"></div>
<div id="info"></div>

CSS

#params {
    width: 100%;
    height: 200px;
    box-shadow: 0 0 10px #999;
    font-family: monospace;
    padding: 5px;
}

#result {
    padding: 5px;
    width: 100%;
    height: 200px;
    box-shadow: 0 0 10px #999;
    font-family: monospace;
    overflow: scroll;
}
#info {
  padding: 5px;
  width: 100%;
  height: 20px;
  font-family: monospace;
}

JavaScript

function suggest() {
    var location = document.getElementById("location").value;
    var resultDiv = document.getElementById("result");
    var typeIdx = document.getElementById("type").selectedIndex;
    var typeValue= document.getElementById("type").options[typeIdx].value ;
    var geoIdx = document.getElementById("territory").selectedIndex;
    var geoValue= document.getElementById("territory").options[geoIdx].value ;
    var fo= {} ;
    if (geoValue && geoValue != "no") fo.territory= [geoValue] ;
    fo.type= [typeValue] ;
    try {
        Gp.Services.autoComplete({
            text: location,
            filterOptions: fo,
            onSuccess: function(result) {
                var resultStr= ""
                if (result.suggestedLocations) {
                    for (i=0 ; i<result.suggestedLocations.length; i++) {
                        var loc= result.suggestedLocations[i] ;
                        resultStr+= "<p>" + loc.fullText + "</p>" ;
                    }
                }
                resultDiv.innerHTML = resultStr ;
            },
            onFailure: function(error) {
                resultDiv.innerHTML = "<p>" + error + "</p>"
            }
        });
    } catch (e) {
        resultDiv.innerHTML = "<p>" + e + "</p>"
    }
}
var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Bibliothèque d'accès version " + Gp.servicesVersion + " (" + Gp.servicesDate + ")</p>";