{% extends 'ClarolineCoreBundle::form_theme.html.twig' %}

{% block simpleautocomplete_widget %}
    {% spaceless %}
        {% block simpleautocomplete_assets %}
            {% if with_vendors %}
            <link rel='stylesheet' type='text/css' href='{{ asset('bundles/clarolinecore/css/common/jquery-ui-bootstrap/jquery-ui-1.9.2.custom.css') }}'/>
            <script src="{{ asset('bundles/frontend/jquery/jquery-ui-1.9.2/jquery-ui-1.9.2.js') }}"></script>
            {% endif %}
        {% endblock %}
        <div class="input-group input-group-sm">
            {{ block('form_widget') }}
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                var path = '{{ path('exporter_api', {'entityReference': entity_reference, '_format': format}) }}';
                var field = $( "#{{ form.vars['id'] }}" );
                field.addClass('form-control');
                field.after('<a id="{{ form.vars['id'] }}_clear" class="btn btn-default input-group-addon" role="button"i><span class="fa fa-times"></span></a>');
                $("#{{ form.vars['id'] }}_clear").on('click', function(){
                    field.val('');
                });
                field.autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: path,
                            dataType: '{{ format }}',
                            {% if 'jsonp' == format %}
                            jsonp: 'extractData',
                            jsonpCallback: 'extractData',
                            {% endif %}
                            contentType: "application/json; charset=utf-8",
                            data: {
                                search: request.term,
                                extra: {{ extraDatas|json_encode()|raw }}
                            },
                            complete: function( data ) {
                                if (data.status == 200) {
                                    var result = eval(data.responseText);
                                    response(
                                        $.map(
                                            result, function( item ) {
                                                return { label: item.label, value: item.label };
                                            }
                                        )
                                    );
                                }
                            }
                        });
                    }
                });
            });
        </script>
    {% endspaceless %}
{% endblock %}
