如何在 jQuery Select2 中包含标签？答案

【问题标题】：How to include a label in jQuery Select2?如何在 jQuery Select2 中包含标签？
【发布时间】：2023-02-16 11:32:33
【问题描述】：

我已经设置了一个 Select2 实例来查询我的数据库并通过 AJAX 在用户有权访问的输入上呈现结果。

一切正常，但由于这是用户的位置选择输入，并且存在名称相同的地区和城市，例如，我想为每个结果添加一个标签以将它们标识为“地区”、“市”、“教区”等，但我无法这样做，我一直无法在 Internet 上找到关于此事的任何支持，而且扩展程序本身似乎无法做到这一点，

Select2 AJAX 函数

$("#location-property-alert-location").select2({
      placeholder: "Type the name of the location",
      minimumInputLength: 2,
      ajax: {
        url: '/ajax/search-locations-by-query',
        dataType: 'json',
        type: "GET",
        data: function data(params) {
          return {
            query: params.term // search term

          };
        },
        processResults: function processResults(response) {
          // return{
          //     results: response.name
          // };
          response = response.map(function (item) {
            // console.log(item);
            return {
              id: JSON.stringify(item), // json_encode the data so we can pass this through the ID
              code: JSON.stringify(item),
              test: "hello",
              text: item.location_name
            };
          });
          console.log(response);
          return {
            results: response
          };
        },
        cache: true
      }
    });

我知道 Select2 可以采用其他数据参数，例如代码和测试我在上面添加的参数，但我不知道如何使用这些参数在每个项目类别的结果中创建元素，例如，如下面的屏幕截图所示。

每个项目的类别都被字符串化，所以我可以通过表单的任何一种方式提交这些数据，但我需要在前端识别每个项目的类别，以便用户能够区分位置，

任何人都知道如何做到这一点？

干杯

注意：我不想要 Select2 的标签外观，它基本上按类别对选项进行分组。

【问题讨论】：

标签： javascript jquery jquery-select2 jquery-select2-4

【解决方案1】：

您可以使用 templateSelection 来格式化您的选择外观，然后根据您的 json 数据更改结果。

下面是如何使用随机 json 数据的演示。

function formatResult(item) {
  //checks if the id present or not
  if (!item.id) {
    return item.text;
  }
  //return the format options..
  var element = $(`<span>${item.text}<span class="text_small">${item.username}</span></span>'`)
  return element;
};

$("#location-property-alert-location").select2({
  placeholder: "Type the name of the location",
  minimumInputLength: 2,
  ajax: {
    url: 'https://jsonplaceholder.typicode.com/users', //this is just for demo...
    dataType: 'json',
    type: "GET",
    data: function data(params) {
      return {
        query: params.term // search term

      };
    },
    processResults: function processResults(response) {
      response = response.map(function(item) {
        return {
          id: JSON.stringify(item.id),
          text: item.name,
          username: item.username //pass here extra param
        };
      });
      return {
        results: response
      };
    },
    cache: true
  },
  templateResult: formatResult //your selection format
});

.text_small {
  font-size: 10px;
  color: grey;
  margin-left: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select id="location-property-alert-location" style="width:300px"></select>

【讨论】：