jQuery Select2 onkeyup 没有触发

Posted

技术标签:

【中文标题】jQuery Select2 onkeyup 没有触发【英文标题】:jQuery Select2 onkeyup not firing 【发布时间】:2017-08-25 11:19:31 【问题描述】:

我正在尝试使用 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-search__field 元素在哪里 Select2初始化开始时会自动添加字段,我会在上面的问题中添加输入字段代码 问题已更新为输入字段的代码 【参考方案1】:

我认为问题是由于 .select2-search__field 输入在 select2 初始化时被动态添加到页面,并且它没有连接到您编写的 onkeyup 函数的事件处理程序。

我将您的函数定义更改为:

$('.select2-search__field').on('keyup', function (e) 

$(document).on('keyup', '.select2-search__field', function (e)     

它似乎工作得很好,没有设置multiple 属性。

在此处查看更改后的小提琴:Updated Fiddle

【讨论】:

似乎正在工作:) 但是我决定使用 Bootstrap 的 Typeahead。比 Select2 需要更多的工作来整理,但看起来和工作都很棒 如何使用多选选项,因为当我搜索它时,它按预期工作,但是当我选择它时。选择框被清除!【参考方案2】:

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");
  );

【讨论】:

以上是关于jQuery Select2 onkeyup 没有触发的主要内容,如果未能解决你的问题,请参考以下文章

在select2 jquery插件中没有调用initSelection

onkeydown 和 onkeyup 事件在 Internet Explorer 8 上不起作用

Javascript onkeyup延迟函数调用[重复]

没有 select2/compat/inputData

单击时克隆的 select2 没有响应

select2 的错误没有正确显示