私は結果のテーブルを動的に生成していますが、各行の1つのセルにオートコンプリートが含まれています。 Select2を使用してオートコンプリートオプションを表示し、各行に固有のカスタムデータとajaxデータからドロップダウンを入力しています。私のajaxデータは私のPython appメソッドから来ています。私はPOSTを使って、Pythonメソッドに変数を送ってカスタムデータを生成しています。これはセットアップ方法です:select2の値を使用:ajaxオートコンプリートデータパラメータへの入力としてコールを開く
$(".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
};
}
}
});
私のJinjaテンプレートからの値にselect要素のidを設定しました。
<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>
ダイナミックなので、私はそのIDが各選択に対して何であるか分かりません。私はこのような値を取得することができています:
$('.js-example-tokenizer-ajax-data').on('select2:opening', function (evt) {
myValue = document.getElementById(this.id).getAttribute('id');
console.log("myValue: ", myValue)
});
私はデータ変数を経由して、私のpythonの方法に送り返す変数としてmyValueを使用したいと思います。オートコンプリートコードで使用するmyValueにアクセスする方法はありますか?
'$(this)を使用して値を取得できるようです。 attr( 'id') 'をajax呼び出しのmyValueの代わりに使用し、select2:openingコードスニペットを使用しないでください。 Python関数に '$(this).attr( 'id')'を渡すと、値が 'jsonData = request.json ['variable']' – tw1742