javascript - 如何按用户选择的特定类别进行搜索

Question

我试图让用户选择一个类别(总共 3 个)，然后仅搜索该类别中的项目。

引用图片:https://ibb.co/zRspdFs

因此，当用户单击类别 1(例如类别 1)，然后单击表单输入时，搜索应显示所选类别中的项目。

现在我有一些虚拟数据作为输入字段的值。我可以从下拉选项中检索值。但我不知道如何过滤搜索。

var availableTags = [
  "mama",
  "tata",
  "PAPI"
];

$('#menu li').click(function(ev) {
  ev.preventDefault();
  var value = $(this).val();
  $("#custId").val(value);
});

$("#searcher").autocomplete({
  source: availableTags,
  minLength: 0
}).click(function() {
  $(this).autocomplete("search", $(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form class="form-inline col-lg-4 col-md-4 col-xs-12">
  <svg class="svg-custom" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                            </svg>
  <input class="input-custom srch form-control mr-sm-2" type="search" placeholder="Search by Keywords" id="searcher" aria-label="Search">

  <div class="search-dropper">
    <span class="icon-down-open-mini arrow-search"></span>
    <ul id="menu" class="search-dropdown">
      <a class="" href="#">
        <li value="1">1</li>
      </a>
      <a href="#">
        <li value="2">2</li>
      </a>
      <a href="#">
        <li value="3">3</li>
      </a>
      <li>
        <input type="hidden" id="custId" name="custId" value="3487">
      </li>
    </ul>
  </div>
</form>

Answer 1

您可以制作包含项目列表的数组吗？选择类别后可以将其传递给自动完成功能？

例如:

var availableTags = [
    "mama",
    "tata",
    "PAPI"
];

var categories = [
[searchItem1, searchitem2...],
[searchItem1, searchitem2...],
[searchItem1, searchitem2...]
] 

在类别上选择您获取索引，然后按索引提取可搜索项目，然后将其传递给自动完成:

$( "#searcher" ).autocomplete({
  source: categories[indexOfCategory]
});

我确信有一个更干净的解决方案，jquery 不是我的专长，但你可以这样做