如何在jQuery Select2的AJAX搜索结果中添加类别标签？

步骤1：传递类别数据到结果项 #

首先在processResults的map函数里，把后端返回的地点类别字段（比如item.location_type）添加到返回的对象中，确保前端能获取到类别信息：

$("#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) {
      response = response.map(function (item) {
        return {
          id: JSON.stringify(item),
          code: JSON.stringify(item),
          text: item.location_name,
          locationType: item.location_type // 替换为后端实际返回的类别字段名
        };
      });
      return {
        results: response
      };
    },
    cache: true
  },
  // 步骤2：自定义结果项渲染模板
  templateResult: function formatLocationResult(location) {
    // 处理加载状态
    if (location.loading) {
      return location.text;
    }
    // 构建包含类别的HTML结构
    var $result = $(
      '<div class="select2-location-result">' +
        '<span class="location-name">' + location.text + '</span>' +
        '<span class="location-type-tag">' + location.locationType + '</span>' +
      '</div>'
    );
    return $result;
  },
  // 可选：自定义选中项的显示
  templateSelection: function formatLocationSelection(location) {
    return location.text + ' (' + location.locationType + ')';
  }
});

步骤3：添加CSS美化标签样式 #

为了让类别标签更直观，添加基础样式优化显示效果：

.select2-location-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}

.location-type-tag {
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #444;
  font-weight: 500;
}

关键说明 #

• 请根据后端实际返回的类别字段名，替换代码中的item.location_type，确保能正确拿到"District""Municipality""Parish"等值。
• templateResult负责渲染下拉列表中的每个搜索结果，templateSelection负责渲染选中后输入框内的显示内容，可根据需求调整结构。
• 这种方式无需依赖Select2的分组功能，直接在每个结果项内附加类别标签，用户能快速区分同名地点。

内容的提问来源于stack exchange，提问作者António Lima