select2 - 获取当前搜索文本

Question

我正在使用 select2 并使用此查询功能从服务器获取可用选项

var recipientsTimeout;
this.loadRecipients = function (query) {
    clearTimeout(recipientsTimeout);
    recipientsTimeout = setTimeout(function(){
        data.transmitRequest('lookupcontacts', { search: query.term }, function(resp){
            query.callback({ results: resp.items });
        });
    }, 500);
};

它使用我们自己的ajax层，并延迟搜索直到用户停止打字，并且工作正常。唯一的小问题是，如果用户键入一些文本，然后立即在其上退格，我的最后一个超时仍然会触发，并且 ajax 请求将被触发并被忽略。这不会造成任何问题，但并不是最佳的。

是否有任何（最好是非脆弱的）方法来获取当前文本是什么？似乎发送的

query

对象有一个 element 属性，它是我设置 select2 的原始隐藏输入的 jQuery 包装器，但我没有直接的方法可以看到用户正在输入的实际文本框显然，我可以检查它并轻松找出 dom 模式，并构建一个从隐藏元素返回到用户输入内容的选择器，但我真的很讨厌这样做，因为特定布局可以在未来版本中轻松更改.

那么获取当前输入的文本的最佳方法是什么，这样我就可以在 setTimeout 到期时对其进行快速检查，并且我即将运行我的 ajax 请求。

Answer 1

我正在使用4.0.3，我的做法是这样的：

$("#mySelect2").data("select2").dropdown.$search.val()

Answer 2

隐藏的输入元素（在其中初始化 select2 的位置）获取数据属性

select2

，其中包含对 select2 使用的所有元素的引用。所以你可以做这样的事情：

var hiddenInputSelector = '#e1',
    select2 = $(hiddenInputSelector).data('select2'),
    searchInput = select2.search;

if($(searchInput).val() === '')
    clearTimeout(recipientsTimeout);

但这不在文档中，因此将来可能会发生变化。

Answer 3

在 select2 版本 4.0.3 这对我有用，而其他版本则不然：

$('.select2-search__field')[0].value;

Answer 4

我做了这样的事情来获取当前的搜索词：

list.data("select2").search[0].value;

Answer 5

假设你的元素的id是

#item_search

，我们首先需要识别由

select2:open

打开的模态，然后我们可以监听输入，这样每当用户输入内容时我们就可以获得值

        $('#item_search').on('select2:open', function (e) {
            var searchText = $('.select2-search__field').val();
            $('.select2-search__field').on('input', function() {
                var searchText = $(this).val();
                console.log('Entered text:', searchText);
            });
        });