<div class="form-group">
    <div class="col-sm-4">
        <label>
            {% if link %}
            <a onclick="{{link}}">{{field.label}}</a>
            {% else %}
                {% if link2 %}
                <a onclick="open2('{{link2}}');">{{field.label}}</a>
                {% else %}
                {{field.label}}
                {% endif %}
            {% endif %}
        </label>
    </div>
    {% if field.autocomplete_url %}
    <div class="col-sm-8">
        <input id="{{field.full_name}}" name="{{field.full_name}}" type="text"
               class="form-control"
               value="{{field.value_as_str}}"
               {% if field.placeholder %} placeholder="{{field.placeholder}}" {% endif %}
               {% if field.autocomplete %} autocomplete="{{field.autocomplete}}" {% endif %}
               {% if field.disabled %} disabled {% endif %}
        />
        {% for error in field.errors %}
        <div class="red">{{ error }}</div>
        {% endfor %}
    </div>
    <script>
        $(document).ready(function(){
            $("#{{field.full_name}}").autocomplete({
                source: "/{{field.autocomplete_url}}/",
                minLength: 2,
                open: function(){
                    setTimeout(function () {
                        $('.ui-autocomplete').css('z-index', 99);
                    }, 0);
                },
                select: function (event, ui) {
                    if ('id' in ui.item)
                        document.getElementById('{{field.full_name}}_id').value = ui.item.id;
                },
                focus: function (event, ui) {
                    if ('id' in ui.item)
                        document.getElementById('{{field.full_name}}_id').value = ui.item.id;
                    event.cancelled = true
                }
              });
            {{field.full_name}}_old_value = null;
            document.getElementById('{{field.full_name}}').onfocus = function() {
                {{field.full_name}}_old_value = document.getElementById('{{field.full_name}}').value
            };
            document.getElementById('{{field.full_name}}').addEventListener('keydown', function(event){
                if (event.key === "Escape") {
                    value = {{field.full_name}}_old_value
                    if (value != null && value != document.getElementById("{{field.full_name}}").value) {
                        document.getElementById('{{field.full_name}}').value = {{field.full_name}}_old_value
                        event.stopPropagation();
                    }
                }
            });
        });
    </script>
    {% else %}
    <div class="col-sm-8">
        <input name="{{field.full_name}}" type="text"
               class="form-control"
               value="{{field.value_as_str}}"
               {% if field.placeholder %} placeholder="{{field.placeholder}}" {% endif %}
               {% if field.autocomplete %} autocomplete="{{field.autocomplete}}" {% endif %}
               {% if field.disabled %} disabled {% endif %}
        />
        {% for error in field.errors %}
        <div class="red">{{ error }}</div>
        {% endfor %}
    </div>
    {% endif %}
</div>
