/Resources/views/Form/Type/sonata_type_model_autocomplete.html.twig
Twig Template | 174 lines | 148 code | 26 blank | 0 comment | 10 complexity | 6ff9c52e869efd604817dbd15c6a263d MD5 | raw file
Possible License(s): JSON, Apache-2.0, MIT
- {#
- This file is part of the Sonata package.
- (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
- For the full copyright and license information, please view the LICENSE
- file that was distributed with this source code.
- #}
- {% spaceless %}
- <input type="text" id="{{ id }}_autocomplete_input" value=""
- {%- if read_only is defined and read_only %} readonly="readonly"{% endif -%}
- {%- if disabled %} disabled="disabled"{% endif -%}
- {%- if required %} required="required"{% endif %}
- />
- <div id="{{ id }}_hidden_inputs_wrap">
- {% if multiple -%}
- {%- for idx, val in value if idx~'' != '_labels' -%}
- <input type="hidden" name="{{ full_name }}[]" {%- if disabled %} disabled="disabled"{% endif %} value="{{ val }}">
- {%- endfor -%}
- {% else -%}
- <input type="hidden" name="{{ full_name }}" {%- if disabled %} disabled="disabled"{% endif %} value="{{ value[0]|default('') }}">
- {% endif -%}
- </div>
- <script>
- (function ($) {
- var autocompleteInput = $('#{{ id }}_autocomplete_input');
- autocompleteInput.select2({
- {%- set allowClearPlaceholder = (not multiple and not required) ? ' ' : '' -%}
- placeholder: '{{ placeholder ?: allowClearPlaceholder }}', // allowClear needs placeholder to work properly
- allowClear: {{ required ? 'false' : 'true' }},
- enable: {{ disabled ? 'false' : 'true' }},
- readonly: {{ read_only is defined and read_only or attr.readonly is defined and attr.readonly ? 'true' : 'false' }},
- minimumInputLength: {{ minimum_input_length }},
- multiple: {{ multiple ? 'true' : 'false' }},
- width: '{{ width }}',
- dropdownAutoWidth: {{ dropdown_auto_width ? 'true' : 'false' }},
- containerCssClass: '{{ container_css_class ~ ' form-control' }}',
- dropdownCssClass: '{{ dropdown_css_class }}',
- ajax: {
- url: '{{ url ?: path(route.name, route.parameters|default([]))|e('js') }}',
- dataType: 'json',
- quietMillis: {{ quiet_millis }},
- cache: {{ cache ? 'true' : 'false' }},
- data: function (term, page) { // page is the one-based page number tracked by Select2
- {% block sonata_type_model_autocomplete_ajax_request_parameters %}
- return {
- //search term
- '{{ req_param_name_search }}': term,
- // page size
- '{{ req_param_name_items_per_page }}': {{ items_per_page }},
- // page number
- '{{ req_param_name_page_number }}': page,
- // admin
- {% if sonata_admin.admin is not null %}
- 'uniqid': '{{ sonata_admin.admin.uniqid }}',
- 'admin_code': '{{ sonata_admin.admin.code }}',
- {% elseif admin_code %}
- 'admin_code': '{{ admin_code }}',
- {% endif %}
- // subclass
- {% if app.request.query.get('subclass') %}
- 'subclass': '{{ app.request.query.get('subclass') }}',
- {% endif %}
- {% if context == 'filter' %}
- 'field': '{{ full_name|replace({'filter[': '', '][value]': '', '__':'.'}) }}',
- '_context': 'filter'
- {% else %}
- 'field': '{{ name }}'
- {% endif %}
- // other parameters
- {% if req_params is not empty %},
- {%- for key, value in req_params -%}
- '{{- key|e('js') -}}': '{{- value|e('js') -}}'
- {%- if not loop.last -%}, {% endif -%}
- {%- endfor -%}
- {% endif %}
- };
- {% endblock %}
- },
- results: function (data, page) {
- // notice we return the value of more so Select2 knows if more results can be loaded
- return {results: data.items, more: data.more};
- }
- },
- formatResult: function (item) {
- return {% block sonata_type_model_autocomplete_dropdown_item_format %}'<div class="{{ dropdown_item_css_class }}">'+item.label+'<\/div>'{% endblock %};// format of one dropdown item
- },
- formatSelection: function (item) {
- return {% block sonata_type_model_autocomplete_selection_format %}item.label{% endblock %};// format selected item '<b>'+item.label+'</b>';
- },
- escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
- });
- autocompleteInput.on('change', function(e) {
- // console.log('change '+JSON.stringify({val:e.val, added:e.added, removed:e.removed}));
- // remove input
- if (undefined !== e.removed && null !== e.removed) {
- var removedItems = e.removed;
- {% if multiple %}
- if(!$.isArray(removedItems)) {
- removedItems = [removedItems];
- }
- var length = removedItems.length;
- for (var i = 0; i < length; i++) {
- el = removedItems[i];
- $('#{{ id }}_hidden_inputs_wrap input:hidden[value="'+el.id+'"]').remove();
- }
- {%- else -%}
- $('#{{ id }}_hidden_inputs_wrap input:hidden').val('');
- {%- endif %}
- }
- // add new input
- var el = null;
- if (undefined !== e.added) {
- var addedItems = e.added;
- {% if multiple %}
- if(!$.isArray(addedItems)) {
- addedItems = [addedItems];
- }
- var length = addedItems.length;
- for (var i = 0; i < length; i++) {
- el = addedItems[i];
- $('#{{ id }}_hidden_inputs_wrap').append('<input type="hidden" name="{{ full_name }}[]" value="'+el.id+'" />');
- }
- {%- else -%}
- $('#{{ id }}_hidden_inputs_wrap input:hidden').val(addedItems.id);
- {%- endif %}
- }
- });
- // Initialise the autocomplete
- var data = [];
- {%- if value is not empty -%}
- data = {%- if multiple -%}[ {%- endif -%}
- {%- for idx, val in value if idx~'' != '_labels' -%}
- {%- if not loop.first -%}, {% endif -%}
- {id: '{{ val|e('js') }}', label:'{{ value['_labels'][idx]|e('js') }}'}
- {%- endfor -%}
- {%- if multiple -%} ] {%- endif -%};
- {% endif -%}
- if (undefined==data.length || 0<data.length) { // Leave placeholder if no data set
- autocompleteInput.select2('data', data);
- }
- // remove unneeded autocomplete text input before form submit
- $('#{{ id }}_autocomplete_input').closest('form').submit(function()
- {
- $('#{{ id }}_autocomplete_input').remove();
- return true;
- });
- })(jQuery);
- </script>
- {% endspaceless %}