{% if image %}
    <div style="margin-bottom: 10px;">
        <img src="{{ image }}" alt="{{ alt }}" id="display_thumbnail_{{ id }}"/>
    </div>
{% endif %}
{{ html }}
<script type="text/javascript">
    jQuery(function ($) {


        var
                obj = $('#' + '{{ id }}'),
                hidden = $('input[type=hidden][name=' + '{{ name }}]'),
                thumbnail = $('#display_thumbnail_' + '{{ id }}'),
                current_value = "{{ value }}",
                current_label = "{{ label }}",
                current_thumbnail = "{{ image }}";


        obj.autocomplete({
            minLength: {{ min_length }},
            source:"{{ source }}",
            delay: {{ delay }},

            select:function (ui, item) {
                item = item.item;

                obj.val(item.label);
                hidden.val(item.id);
                thumbnail.attr('src', item.thumbnail);

                current_label = item.label;
                current_value = item.id;
                current_thumbnail = item.thumbnail;

                return false;
            },

            focus:function (ui, item) {
                item = item.item;
                thumbnail.attr('src', item.thumbnail);
            }
        });

        obj.blur(function () {
            if (current_value) {
                if (obj.val() !== current_label) {
                    hidden.val('');
                    thumbnail.attr('src', 'no-img.jpg');
                } else {
                    hidden.val(current_value);
                    thumbnail.attr('src', current_thumbnail);
                }
            }
        });
    });
</script>
