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

<script>
    $(document).ready(function(){
        setLabel('label_auto_ci', "Commune");
        $("#auto_ci").change( function () {
          document.getElementById('city').value = document.getElementById('auto_ci').value;
        });
        $("#auto_ci").autocomplete({
            source: "/city_autocomplete/",
            minLength: 1,
            open: function(){
                setTimeout(function () {
                    $('.ui-autocomplete').css('z-index', 99);
                }, 0);
            },
            select: function (event, ui) {
                setZipAndCity(ui.item.zip, ui.item.value);
            },
            focus: function (event, ui) {
                setZipAndCity(ui.item.zip, ui.item.value);
                event.cancelled = true
            }
        });
        registerZipAndCity('auto_ci');
    });
</script>