Question

我正在使用“ 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。 Link select2 from GitHub

Answer 1

不久前我遇到了完全相同的问题，最终用 Select2 V4 做了一件很棘手的事情。我的 <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>

formatProductSelection() 中的上述 JS 代码会忽略 || 和 Select2 代码还会搜索 ID 之后的其他字段或值。也许它有帮助...

使用Select2.js搜索文本和ID

1 个答案: