我正在尝试使用库Select2来实现。假设我有如下数据列表:
[当我输入“水果”时,是否只能显示Apple,香蕉和橙子,而当我输入“体育”时,可以显示篮球和足球。含义是否存在“相关搜索/标记”类型的功能?
谢谢!
您可以做这样的事情:
搜索文档:https://select2.org/searching
function matchCustom(params, data) {
const term = $.trim(params.term);
if (term === "fruit" || term === "sports") {
if (data.type === term) {
return data;
}
return null;
}
return data;
}
const data = [
{
id: 0,
type: "fruit",
text: "apple"
},
{
id: 1,
type: "fruit",
text: "orange"
},
{
id: 2,
type: "sports",
text: "football"
},
{
id: 3,
type: "sports",
text: "basketball"
}
];
$(document).ready(() => {
$(".js-example-basic-single").select2({ data, matcher: matchCustom });
});
.js-example-basic-single {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<div id="app"></div>
<select class="js-example-basic-single" name="state"></select>
</select>
</body>
</html>