Select2：如何select相关结果

Question

我正在尝试使用库 Select2 看看这是否可行。假设我有如下数据列表：

苹果
篮球
香蕉
橙色
足球

有没有办法在我输入 "fruit," 时只显示 Apple、Banana 和 Orange，而在我输入 "Sports." 时只显示 Basketball 和 Football 意思是有 "related search/tagging" 类型吗功能？

谢谢！

Answer 1

你可以这样做：

搜索文档：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/select2@4.0.13/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/select2@4.0.13/dist/js/select2.min.js"></script>
  </head>

  <body>
    <div id="app"></div>
   <select class="js-example-basic-single" name="state"></select>
    </select>
  </body>
</html>

Select2：如何select相关结果

Select2: How to select related results

javascript

jquery-select2