我尝试使用 AJAX 调用更新 Select2 输入字段的选项,但链接到输入字段的 onkeyup 函数未运行。
*请注意,当我将选择框的多个属性设置为
multiple="multiple"
时,onkeyup函数确实会运行,但是当我尝试通过删除属性来获得像选择框这样的单个结果时,什么也没有发生
我的 HTML 看起来像这样:
<select class="js-example-templating" style="width: 50%">
</select>
我的 jQuery 看起来像这样:
ar all_options = [
['Alaskan/Hawaiian Time Zone', [['AK','Alaska'], ['HI','Hawaii']]],
['Pacific Time Zone', [['CA','California'], ['NV','Nevada'], ['OR','Oregon'], ['WA','Washington']]],
['Mountain Time Zone', [['CAAZ','Arizona'], ['CO','Colorado'], ['ID','Idaho'], ['MT','Montana'], ['NE','Nebraska'], ['NM','New Mexico'], ['ND','North Dakota'], ['UT','Utah'], ['WY','Wyoming']]]
];
function formatState(state) {
if (!state.id) {
return state.text;
}
var $state = $('<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>');
return $state;
};
$(".js-example-templating").select2({
minimumInputLength: 1,
templateResult : formatState
});
$('.select2-search__field').on('keyup', function (e) {
tmp_html = '';
//do ajax call here
$(all_options).each(function(i) {
var group = all_options[i][0];
var options = all_options[i][1];
tmp_html += '<optgroup label="'+group+'">';
console.log(options);
$(options).each(function(i) {
var option_id = options[i][0];
var option_text = options[i][1];
tmp_html += '<option value="'+option_id+'">'+option_text+'</option>';
});
tmp_html += '</optgroup>';
});
//now add the new options to the select box
$('.js-example-templating').html(tmp_html);
});
AJAX 功能尚未添加,onkeyup 功能目前仅添加所有选项,一旦我可以运行 onkeyup 功能,就会添加此功能。
在此之后,所有选择框应该具有以下选项:
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
提前谢谢
当 Select2 初始化开始时,输入字段会自动添加。 输入字段的代码如下所示:
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox">
这是正在发生的事情的一个小提琴: https://jsfiddle.net/Reckless/hz2vqzt7/
当您添加
multiple="multiple"
属性并再次运行时,它将更新可用选项,但如果没有它,它不会触发 onkeyup 事件
我认为问题是由于当 select2 初始化时
.select2-search__field
输入被动态添加到页面,并且它没有挂钩到您编写的 onkeyup
函数的事件处理程序。
我将你的函数定义更改为:
$('.select2-search__field').on('keyup', function (e) {
到
$(document).on('keyup', '.select2-search__field', function (e) {
并且在没有设置
multiple
属性的情况下,它似乎工作得很好。
在此处查看更改后的小提琴:更新的小提琴
Select2 在以下位置之后创建一个新元素:
<select class="js-example-templating" style="width: 50%"></select>
您可以使用以下命令将事件侦听器添加到搜索字段:
document.querySelector("#js-example-templating")
.nextSibling.querySelector(".select2-search__field")
.addEventListener("keyup", function () {
alert("listener added");
});
不要将事件监听器放在“.select2-search__field”上,而是放入元素本身以及 select2 的数据选择器。这将使 keyup 事件正常工作。
$("#elm").data("select2").on("keypress",function(evt) {
console.log(evt)
})