如何在 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 以格式化您问题中使用的结果。关于这方面的文档可以在页面的中间找到here。

文档显示传递给 formatResult 函数的参数是：

formatResult(object, container, query)

第三个参数query 定义为The query object used to request this set of results.。此query 对象包含作为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">