时间戳

首页 > 解决方案 > 使用 Select2.js 搜索文本和 id

jquery - 使用 Select2.js 搜索文本和 id

问题描述

我正在为我的选择使用“Select2”插件以在 SQL 中显示我的表中的所有“供应商”。我使用 Ajax 获取所有供应商，<option>并为我的选择生成带有值和文本的标签。我将所有标签绑定<option>到我的选择中并为其设置“Select2”功能。我已将结果格式化为显示两列，如下所示：
在此处输入图像描述

我阅读了 Select2 的文档以格式化搜索。但我只能搜索文本（上图中的第二列）。

这是我用于结果格式化和搜索的代码：

 //Get NhaCungCap
function GetNhaCungCap() {
    ajaxFunc("/Services.aspx/GetAllNhaCungCap", { pageNumber: 0 }, function (data) {
        var json = JSON.parse(data.d);
        FillNhaCungCap(json);
    })
}
//Binding NhaCungCap
function FillNhaCungCap(json) {
    var html = "";
    $.each(json, function (k, v) {
        html += "<option value=" + v.MaNhaCungCap + ">" + v.TenNhaCungCap + "</option>";
    });

    $("#slNCC").html(html); //Bind <option> tag into select "slNCC"        
}
//Format slNCC using select2
 $('#slNCC').select2({
                placehoder: 'Tìm kiếm nhà cung cấp theo mã hoặc tên (F4)',
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                data: function (repo) {
                    return JSON.stringify({ q: repo.text || repo.id, page: params.page });// search term  
                },
               
                templateResult: formatRepo,
                templateSelection: formatRepoSelection
});  
//function to format Result
function formatRepo(repo) {
    if (repo.loading) {
        return  repo.id || repo.text;
    }
    var markup = "";

    markup += '<div class="row">';
    markup += '<div class="col-sm-4">' + repo.id + '</div>';
    markup += '<div class="col-sm-8">' + repo.text + '</div>';
    markup += '</div>';
    return markup;
}

function formatRepoSelection(repo) {
    return repo.full_name || repo.text;
}

我正在使用 select2 版本 Select2 4.0.6-rc.1。来自 GitHub 的链接 select2

标签： jqueryjquery-select2-4

解决方案

前段时间我遇到了完全相同的问题，最后用 Select2 V4 做了一个 hacky 的事情。我的<select>元素的结构如下：

<select>
  <option value="1001001">title 1||description 1 - lorem ipsum||10,00 EUR</option>
  <option value="1001002">title 2||description 2 - lorem ipsum||20,00 EUR</option>
  <option value="1001003">title 3||description 3 - lorem ipsum||30,00 EUR</option>
</select>

然后，JavaScript 将使用此辅助函数从文本中动态创建 select2 元素的选项：

function formatProductSelection(product) {
  if (product.loading) return product.text; // if it's loading, don't format.
  if (product.id == 0) return product.text; // if it's an unknown ID, just return what you got.
  // Now split into product parts and create HTML source dynamically
  var dParts = product.text.split("||").filter(function (el) {
    return el != "";
  });
  var txt = '<div class="selectProductContainer">';
  txt += '<span class="productId">' + product.id + "</span>: "; // 'id' is an attribute of first function argument, same as 'text' (used above)
  txt += '<span class="productTitle">' + dParts[0] + "</span>";
  txt += '<span class="productDescription">' + dParts[1] + "</span>";
  txt += '<span class="productPrice">' + dParts[2] + "</span>";
  txt += '</div>';
  // Note the jQ - return a jquery element here of the HTML source
  return $(txt);
}

您将它附加到 select2 ，如下所示：

$("#productIdSelect").select2({
  templateResult: formatSingleResult /* not shown here */,
  templateSelection: formatProductSelection,
  theme: 'classic',
  /* ...other options... */
});

最后，使用上面的代码，我只是将 ID 添加到<select>每个选项的值中的原始元素中，然后看起来像这样：

<select>
  <option value="1001001">title 1||description 1 - lorem ipsum||10,00 EUR||1001001</option>
  <option value="1001002">title 2||description 2 - lorem ipsum||20,00 EUR||1001002</option>
  <option value="1001003">title 3||description 3 - lorem ipsum||30,00 EUR||1001003</option>
</select>

上面的 JS 代码在和 Select2 代码搜索 IDformatProductSelection()之后忽略了其他字段或值。||也许它有帮助...

推荐阅读