Select2:如何选择相关结果

问题描述 投票:0回答:1

我正在尝试使用库Select2来实现。假设我有如下数据列表:

  • 苹果
  • 篮球
  • 香蕉
  • 橙色
  • 足球

[当我输入“水果”时,是否只能显示Apple,香蕉和橙子,而当我输入“体育”时,可以显示篮球和足球。含义是否存在“相关搜索/标记”类型的功能?

谢谢!

javascript jquery-select2
1个回答
0
投票

您可以做这样的事情:

搜索文档: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>
© www.soinside.com 2019 - 2024. All rights reserved.