select2.Js v4.0:如何显示和格式化本地数组数据源

select2. js v4.0: how display and format local array data source?

本文关键字：格式化 数据源 数组 显示 v4 Js 何显示 select2      更新时间：2023-09-26

我正在使用select2.js V4.0(不是3.6!!)，我想显示和格式化一个javascript本地源:

var data_names = [{
  id: 0,
  text: "Henri",
  last_name: 'Barbusse'
}, {
  id: 1,
  text: "John",
  last_name: 'Lenon'
}, {
  id: 2,
  text: "Victor",
  last_name: 'Hugo'
}, {
  id: 3,
  text: "Marie",
  last_name: 'Stuart'
}, {
  id: 4,
  text: "Boriss",
  last_name: 'Vian'
}];

我的格式方法可以是例如:

function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = '<span class="my_class">' + item.text + ' ' + item.last_name + '</span>';
  return full_name;
}

你知道在v4.0中是怎么做的吗?

根据文档，你必须使用选项 templateResult

templateResult函数应该返回一个包含要显示的文本的字符串，或者一个包含要显示的数据的对象(比如jQuery对象)。它还可以返回null，这将阻止该选项显示在结果列表中。

应该是这样的

$('select').select2({
  multiple: true,
  data: data_names,
  templateResult: name_format
});


function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = $('<span class="my_class">' + item.text + ' ' + item.last_name + '</span>');
  return full_name;
}
$(function() {
  var data_names = [{
    id: 0,
    text: "Henri",
    last_name: 'Barbusse'
  }, {
    id: 1,
    text: "John",
    last_name: 'Lenon'
  }, {
    id: 2,
    text: "Victor",
    last_name: 'Hugo'
  }, {
    id: 3,
    text: "Marie",
    last_name: 'Stuart'
  }, {
    id: 4,
    text: "Boriss",
    last_name: 'Vian'
  }];
  $('select').select2({
    multiple: true,
    data: data_names,
    templateResult: name_format
  })
});
select {
  width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<select></select>

同样，name_format方法应该返回一个DOM/jQuery对象，而不是字符串。

function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = $('<span class="my_class">' + item.text+ ' ' + item.last_name+'</span>');
  return full_name;
}
相关文章：