autocomplete.tpl 2.52 KB
Newer Older
1
<select class="js-data-ajax" multiple="multiple" id="{{$id}}" name="{{$name}}[]" {{if $describedby}}aria-describedby="{{$describedby}}"{{/if}}>
Robert Lyon's avatar
Robert Lyon committed
2
3
4
5
6
7
{{if $initvalues}}
    {{foreach from=$initvalues item=value}}
    <option selected value="{{$value->id}}">{{$value->text}}</option>
    {{/foreach}}
{{/if}}
</select>
Naomi Guyer's avatar
Naomi Guyer committed
8

9
<script type="application/javascript">
10
{{if !$inblockconfig}}
11
    jQuery(window).on('load', function () {
12
{{/if}}
Naomi Guyer's avatar
Naomi Guyer committed
13
14
15
16
    jQuery("#{{$id}}").select2({
        ajax: {
            url: "{{$ajaxurl}}",
            dataType: 'json',
Robert Lyon's avatar
Robert Lyon committed
17
18
19
            type: 'POST',
            delay: 250,
            data: function(params) {
Naomi Guyer's avatar
Naomi Guyer committed
20
                return {
Robert Lyon's avatar
Robert Lyon committed
21
22
23
24
25
                    'q': params.term,
                    'page': params.page || 0,
                    'sesskey': "{{$sesskey}}",
                    'offset': 0,
                    'limit': 10,
Naomi Guyer's avatar
Naomi Guyer committed
26
27
                }
            },
Robert Lyon's avatar
Robert Lyon committed
28
            processResults: function(data, page) {
Naomi Guyer's avatar
Naomi Guyer committed
29
                return {
30
                    {{if $renderresult}}
31
32
33
34
35
36
37
38
39
                    results: jQuery.map(data.results, function(item) {
                        // sometimes text contains html that has to be renderered in the result list (e.g. user profile)
                        // we're assigning text to resultsText variable that get rendered in results, and
                        // leave only text values in text variable. (in selection field will be displayed only text without markup)
                        return jQuery.extend(item, {
                          resultsText: item.text,
                          text: jQuery('<div>').html(item.text).text()
                        })
                    }),
40
41
42
                    {{else}}
                    results: data.results,
                    {{/if}}
Robert Lyon's avatar
Robert Lyon committed
43
44
45
                    pagination: {
                        more: data.more
                    }
Naomi Guyer's avatar
Naomi Guyer committed
46
47
48
                };
            }
        },
49
        language: "{{$language}}",
Robert Lyon's avatar
Robert Lyon committed
50
51
52
53
54
        multiple: {{$multiple}},
        width: "{{$width}}",
        allowClear: {{$allowclear}},
        {{if $hint}}placeholder: "{{$hint}}",{{/if}}
        minimumInputLength: {{$mininputlength}},
55
56
57
        templateResult: function(item) {
            return item.resultsText || item.text;
        },
Naomi Guyer's avatar
Naomi Guyer committed
58
59
        {{$extraparams|safe}}
    });
60
61
62
63
64
65
    jQuery("#{{$id}}").on('select2:select', function(e) {
        window.pageIsRendering = false;
    });
    jQuery("#{{$id}}").on('select2:unselect', function(e) {
        window.pageIsRendering = false;
    });
66
67
68
{{if !$inblockconfig}}
    });
{{/if}}
Naomi Guyer's avatar
Naomi Guyer committed
69
70
jQuery("#{{$id}}").prop('disabled', {{$disabled}});
</script>