<div class="{{class}}">
    <div class="form-group">
        <label id="label_auto_zi" name="label_auto_zi"></label>
        <input id="auto_zi" name="auto_zi"
               class="form-control"
               type="text"
               value="{{zip}}"
                {% if tabindex %} tabindex="{{tabindex}}"{% endif %}
               spellcheck="false" autocorrect="off" autocomplete="off"/>
        <input type="hidden" id="zip" name="zip" value="{{zip}}"/>
    </div>
</div>

<script>
    $(document).ready(function(){
        setLabel('label_auto_zi', "Code postal");
        $("#auto_zi").autocomplete({
            source: "/zip_autocomplete/",
            minLength: 1,
            open: function(){
                setTimeout(function () {
                    $('.ui-autocomplete').css('z-index', 99);
                }, 0);
            },
            select: function (event, ui) {
                setZipAndCity(ui.item.value, ui.item.city);
            },
            focus: function (event, ui) {
                setZipAndCity(ui.item.value, ui.item.city);
                event.cancelled = true
            }
        });
        registerZipAndCity('auto_zi');
    });
</script>