

<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: Advanced Example</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
    <style>
        .ac-output {
            padding: 10px;
            background: #f1f1f1;
            display: none;
        }
    </style>
</head>
<body>
<table border="0" style="width: 100%">
    <tr>
        <td style="padding: 5px; vertical-align: top">
            <label>Autocomplete</label>
            <input id="autocomplete" style="width:300px" type="text" autocomplete="off"/>
        </td>
        <td style="padding: 5px; vertical-align: top">
            <div class="ac-output">
                <pre>
                    <code class="json"></code>
                </pre>
            </div>
        </td>
    </tr>
</table>


<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBRGMiivPLyst9vAVm8C4aPCP3sq44SkJI"></script>
<script src="https://www.combitrip.org/api/public/combitrip.geocomplete.js?key=32a61ca69e22441db052df11ab8ba02b"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
    $(function () {
        $("#autocomplete").abgeo({
            showCurrentLoc: false,
            resultRenderLimit: 5,
        }).bind("abgeo:place_changed", function (event, result) {
            $('.ac-output').show();
            var $block = $('.ac-output code');
            $block.text(JSON.stringify(result, null, 2));
            hljs.highlightBlock($block.get(0));
            ;
        });
    });
</script>

</body>