使用来自 select2:opening 调用的值作为 ajax 自动完成数据参数的输入

Question

我正在动态生成 table 结果，每行中的一个单元格包含一个自动完成。我正在使用 Select2 来显示自动完成选项，并从 ajax 数据和每行唯一的自定义数据填充下拉列表。我的 ajax 数据来自我的 Python 应用程序方法，我正在使用 POST 将变量发送回 Python 方法以用于生成自定义数据。这是设置方式：

$(".js-example-tokenizer-ajax-data").select2({
            tags: true,
            createTag: function (params) {
                return {
                  id: params.term,
                  text: params.term,
                  newOption: true
                }
            },
            templateResult: function (data) {
                var $result = $("<span></span>");
                $result.text(data.text);
                if (data.newOption) {
                    $result.append(" <em>(new)</em>");
                }
                return $result;
            },
            placeholder: 'Select an option',
            maximumSelectionLength: 3,
            ajax: {
                url: '{{ url_for("select2Autocomplete") }}',
                contentType: 'application/json',
                method: "POST",
                dataType : 'json',
                data: JSON.stringify({variable:myValue}),
                processResults: function (data) {
                    return {
                        results: data.resource_list
                    };
                }
            }
        });

我已将 select 元素的 ID 设置为我的 Jinja 模板中的值。

<select onfocus="this.selectedIndex = -1;" id="{{ key }}" class="js-example-tokenizer-ajax-data" multiple="multiple" miriamId="{{ value }}" style="width:100%">
    <option value="{{ key }}" selected>{{ miriam_name_dict[value] }}</option>
</select>

因为它是动态的，所以我不知道每个 select 的 ID 是什么。我能够得到这样的值：

$('.js-example-tokenizer-ajax-data').on('select2:opening', function (evt) {
            myValue = document.getElementById(this.id).getAttribute('id');
            console.log("myValue: ", myValue)
    });

我想使用 myValue 作为我通过数据变量发送回我的 python 方法的变量。有什么方法可以访问 myValue 以在自动完成代码中使用？

Answer 1

我能够将用户点击的 select 元素的数据传回自动完成方法，如下所示：

$(".js-example-tokenizer-ajax-data").select2({
            tags: true, //Allows for free text input of tag values
            createTag: function (params) {
                return {
                  id: params.term,
                  text: params.term,
                  newOption: true
                }
            },
            templateResult: function (data) {
                var $result = $("<span></span>");
                $result.text(data.text);
                if (data.newOption) {
                    $result.append(" <em>(new)</em>");
                }
                return $result;
            },
            placeholder: 'Select an option',
            maximumSelectionLength: 3,
            ajax: {
                url: '{{ url_for("select2Autocomplete") }}',
                contentType: 'application/json',
                method: "POST",
                dataType : 'json',
                data: function() {
                    var myValue = $(this).attr('id');
                    return JSON.stringify({variable: myValue})
                },
                processResults: function (data) {
                    return {
                        results: data.resource_list
                    };
                }
            }
        });

我无法直接使用 {variable: $(this).attr('id')} 作为数据参数的值，需要在值上使用 JSON.stringify使用 jsonData = request.json["variable"]

在 python 方法中获取值

使用来自 select2:opening 调用的值作为 ajax 自动完成数据参数的输入

Use value from select2:opening call as input to ajax autocomplete data parameter

python

ajax

python-2.7

jquery-select2