Question

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

因此，当用户单击（例如）类别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不是我的专长，但是您可以执行以下操作

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

1 个答案: