Question

我正在使用select2版本4.0.3在用户在搜索框中键入内容时搜索人们的姓名。当搜索框打开时，我有一个名为“全局搜索”的按钮。用户实质上只是在一个位置内搜索人员，如果没有结果，或者他们想搜索所有位置，则单击全局搜索按钮以打开或关闭该功能。

一切都很好，但是，到目前为止，当用户键入名称然后单击全局搜索按钮时，用户必须返回搜索框以退格/输入另一个字母以触发ajax搜索。

我基本上只想要它，所以当选择全局搜索按钮时，将自动再次搜索搜索框中已经存在的值。

这是我的select2代码：

   var select2 = $("#select_search").select2({
        ajax: {
            url: function () {
                if ($("#select_search").hasClass('lookup_location')) {
                    return "ajax_get_json.php?what=location_autocomplete_contacts";
                } else {
                    return "ajax_get_json.php?what=company_autocomplete_contacts"
                }
            },
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) {
            return markup;
        }, 
        minimumInputLength: 2,
        templateResult: formatResults,
        templateSelection: formatResultsSelection
    });

当select2打开时，我正在添加全局搜索按钮/链接，如下所示：

$("#select_search").on('select2:open', function (e) {

    //add the global search link text
    $(".select2-results:not(:has(a))").prepend('<span style="" id="global_search"><a id="global_link" href="javascript:;" class="btn"><i id="global_search_icon" class="icon-globe"></i> <span id="global_search_text">Global search off...</span></a></span>');

  //if clicking the global search button, change the text,color, add proper class...
    $('.select2-results').on('click', '#global_search', function (e) {

        e.preventDefault();

        if ($('#global_search_icon').css('color') == 'rgb(73, 220, 50)') {
            //make lookup location wide only
            $('#select_search').removeClass('lookup_company').addClass('lookup_location');
            $('#global_search_text').html("Global search OFF...");
            $('#global_link').css('color', '#337ab7'); 

            //BELOW IS WHAT I ADDED TO TRY TO TRIGGER THE SEARCH AGAIN WITHOUT MAKING THE USER DO ANYTHING IN THE SEARCH BOX
            $('#select_search').val().trigger('change.select2');

        } else {
            //make lookup company wide
            $('#select_search').removeClass('lookup_location').addClass('lookup_company');
            $('#global_search_text').html("Global search ON...");
            $('#global_link').css('color', 'rgb(73, 220, 50)');

            //BELOW IS WHAT I ADDED TO TRY TO TRIGGER THE SEARCH AGAIN WITHOUT MAKING THE USER DO ANYTHING IN THE SEARCH BOX
            $('#select_search').val().trigger('change.select2');

        };

    });

});

从select2文档（https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event）中，我认为我可以使用：

$('#select_search').val().trigger('change.select2');

...但是不幸的是，ajax搜索未按我希望的那样触发。

Select2 Ajax：单击按钮时触发搜索

0 个答案: