如何在 select2 中獲取搜索查詢？

Question

我想獲取搜索查詢。 但我不知道如何獲取搜索查詢。

這不起作用：

var term = $selectField.data("select2").dropdown.$search.val();

在我的代碼中，我試圖在 formatResult 部分中獲取搜索查詢。 但是變量項是未定義的。 你能告訴我我做錯了什么嗎？

$selectField.select2({
        width: '500px',
        formatResult: function(data) {

            var term = $selectField.data("select2").dropdown.$search.val();

            var text = data.text;
            if (text.includes("/")){
                var repository = getBranchAndRepositoryFromDevLine(text)[0];
                var branch = getBranchAndRepositoryFromDevLine(text)[1];
                var $result = $('<span/>',{
                    class: "branch",
                    text: branch
                }).add($('<span/>',{
                    class: "repository",
                    text: repository}));
                return $result;
            } else{
                var $result = $("<span></span>");
                $result.text(text);
                return $result;
            }
        },
        formatSelection: function(data) {
            var text = data.text;
            if (text.includes("/")){
                var branch = getBranchAndRepositoryFromDevLine(text)[1];
                return branch;
            }
            return text;
        },
        ajax: {
            url: "/rest/solution-delivery/1.0/branch/branch-picker/project-branches",
            cache: false,
            dataType: 'json',
            data: function (params) {
                return {
                    projectId: projectId,
                    query: params,
                    isCommitAllowed: true
                };
            },
            results: function (data, params) {
                return {
                    results: data.sections
                };
            },
            formatNoMatches: function formatNoMatches(query) {
                return "No matches found";
            }
        }
    })

Answer 1

正如對問題的評論中提到的，您當前正在使用舊版本的 Select2，假定為Select v3.5.2或類似版本。 v4 之前的版本有不同的選項，即必須傳遞formatResult以格式化您問題中使用的結果。 關於這方面的文檔可以在頁面的中間找到。

文檔顯示 arguments 傳遞給 formatResult function 是：

formatResult(object, container, query)

其中第三個參數query定義為The query object used to request this set of results. . 此query object 包含搜索作為term屬性。 因此下面打印輸入的搜索查詢。

formatResult: function(object, container, query) {
  var term = query.term;
  console.log('search term is', term);
}

這包含在https://jsfiddle.net/j89q15d6/的示例中以及下面的頁面中。 出於演示目的，該示例將搜索詞附加到括號中的結果文本中。

 // Template function which adds CSS flag and displays country name function flagTemplate(object, container, query) { let term = ""; // Check the search term, if one is found set term variable to be included in result if (query.term) { // search term is set term = " (" + query.term + ")"; } // Append the search term to the result, just for testing return $("<span class='flag-icon flag-icon-" + object.id + " '></span><span class='flag-text'>" + object.text + term + "</span>"); } // Generate the correct URL function generateUrl(term) { if (term) { return "https://restcountries.com/v3.1/name/" + term; } else { return "https://restcountries.com/v3.1/all"; } } // Initialise select2 var $selectField = $('#countrySelect'); $selectField.select2({ width: "element", // Set template for results and selection formatResult: flagTemplate, formatSelection: flagTemplate, // Set placeholder text placeholder: 'Select country...', // Load country list from https://restcountries.com ajax: { url: generateUrl, delay: 250, dataType: "json", results: function(data) { return { results: data.map(x => ({ id: x.cca2.toLowerCase(), text: x.name.official })).sort((a, b) => ('' + a.text).localeCompare(b.text)) }; } } });

 #countrySelect { width: 300px; }.flag-text { margin-left: 10px; }

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script> <:-- Load flags using library https.//github:com/lipis/flag-icons --> <link href="https.//cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet"/> <div>Select v3.5.2 Example</div> <input type="hidden" id="countrySelect">