my code
miku = [
{ id: 1, text: "Blue" },
{ id: 12, text: "David" },
{ id: 3, text: "Judy" },
{ id: 4, text: "Kate" },
{ id: 5, text: "John" },
];
$(".search39").select2({
language: 'zh-TW',
placeholder: "第三人",
containerCssClass: "search",
maximumInputLength: 10,
width: '100%',
minimumInputLength: 0,
tags: true,
data: miku,
matcher:
function (params, data) {
console.log(data)
if ($.trim(params) === '') {
return data;
}
if (data.includes(params)) {
return data;
}
return null;
}
});
but it return me:
Blue
David
Judy
Kate
John
It only output the “text” properties, and it cannot output other properties(like “id”).
I want to search using the id.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<div>
<select class="user"></select>
</div>
<script>
$(function () {
miku = [
{ id: 1, text: "Blue", note: "123" },
{ id: 12, text: "David" },
{ id: 3, text: "Judy" },
{ id: 4, text: "Kate" },
{ id: 5, text: "John" },
];
$(".user").select2({
language: 'zh-TW',
width: '100%',
maximumInputLength: 10,
minimumInputLength: 0,
tags: true,
data: miku,
matcher:
function (params, data) {
var term = params.term;
console.log(data)
if ($.trim(params.term) === '') {
return data;
}
if (data.id.includes(term)) {
console.log(data.id);
return data;
}
return null;
}
});
})
</script>
</body>
</html>
This is the page I tested; it works fine. However, when added to the project, the output is different.
it can output otrher properties.
I also don’t understand why the same code results in different outcomes.