

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Combitrip API - Autocomplete: Custom Endpoint</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
</head>
<body>
<label>Autocomplete</label>
<input id="autocomplete" style="width:300px" type="text" autocomplete="off"/>


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://www.combitrip.org/api/public/combitrip.geocomplete.min.js?key=32a61ca69e22441db052df11ab8ba02b"></script>
<script>
    $(function () {
        $("#autocomplete").abgeo({
            showCurrentLoc: false,
            api: 'https://www.example.com/autocomplete',
            apiParams: {
                mode: 'walking'
            },
            apiCustomHeaders: {
                'api-custom-header': '1234'
            },
            mapSource: function (source) {
                return [
                    {
                        display_name: 'Amsterdam, Netherlands',
                        country: 'Netherlands',
                        country_code: 'NL',
                        state: 'Amsterdam',
                        city: 'Amsterdam'
                    }];
            },
            geocoder: {
                api: 'https://www.example.com/geocode',
                engine: 'custom',
                apiCustomHeaders: {
                    'geocode-custom-header': 'value'
                },
                apiParams: {
                    geocode_param_1: 'value_1',
                    geocode_param_2: 'value_2'
                },
                customParser: function (data) {
                    return {parsed: 'value'};
                }
            }
        }).bind("abgeo:place_changed", function (event, result) {
            alert(JSON.stringify(result, null, 2));
        });
    });
</script>

</body>