除非所有 div 都有特定的类，否则如何隐藏动态 div - algolia

Question

我正在使用名为Algolia 的服务，它的工作原理类似于单页搜索设备。当用户输入要搜索的术语时，Algolia 会自动在包含范围内加载子 div，并提供可能的建议。子 div 与 DOM 一起加载，但子 div 的内容会根据用户输入而变化。输入字段中的每一次按键都会更改 div。

找到的记录

如果结果搜索发现了有效记录，则子 div 将包含以下内容：

<span id="algolia-autocomplete-listbox-0">    
    <div class="aa-dataset-1">
      <span class="aa-suggestions" style="display: block;">
        <div class="aa-suggestion">
          <div class="algolia-result">
            <div class="row">
                <div class="col nopadding">
                    <span>Dynamic data has been added</span>
                </div>
            </div>
          </div>
        </div>
      </span>
    </div>
</span>

在上面的示例中，“aa-dataset-1”类是一个包含建议的 div。 “-1”表示 Algolia 将添加的动态 div。这意味着我可以拥有一个动态 div，其类范围为“aa-dataset-1”到“aa-dataset-X”。

没有找到记录

当 Algolia 没有返回任何结果时，包含的 div ("aa-dataset-X") 仍会填充内容。返回零结果的搜索示例如下：

<div class="aa-dataset-1">
  <div class="algolia-empty">
    <span>No results were found with your current selection.</span>
  </div>
</div>

我的问题是具有“algolia-empty”类的 div 仍然显示，即使有一个具有“aa-suggestions”类的子 div。下图显示了找到的单个记录的示例，但仍显示具有“algolia-empty”类的 div

将始终显示“algolia-empty”类，因为 Algolia 以这种方式构建了他们的产品。

问题

我想要做的是将所有子 div 隐藏在“algolia-autocomplete-listbox-0”中除非每个子 div 都有一个“algolia-empty”类。请记住，这是一个单页应用程序。

可以在这里找到一个工作的 JSFiddle：http://jsfiddle.net/jandk4014/8vktn0cu/44/

更新

服务的成功结果应该是什么样的？查看下图。

如果您想查看它的实际效果，请查看上面的 JSFiddle 链接。

Answer 1

我发现空模板可以通过 Algolia 以“全局”方式设置。

//Search for BR6340-02-0.250 > Success
//Search for blah > Failure

var client = algoliasearch('9G2RUKPPGE', '8860a74c330efaf0119818fcdd800126');

const indices = [
  ['SPR', 'Spacers'],
  ['SWG_SPR', 'Swage Spacers'],
  ['FF_STDF', 'Female-Female Standoffs'],
  ['SWG_STDF', 'Swage Standoffs'],
  ['MF_STDF', 'Male-Female Standoffs'],
  ['BSM', 'Ball Stud Males'],
  ['BSF', 'Ball Stud Females'],
  ['CHF', 'Chassis Fasteners'],
  ['MM_STDF', 'Male-Male Standoff'],
  ['SPR_TRQ', 'Super Torq Swage Standoffs'],
  ['CPS_1', 'Captive Panel Screw - Type 1']
];

const sources = indices.map(function(indexKeyValue) {
  var index = client.initIndex(indexKeyValue[0]);

  return {
    // source would be edited with the custom source from the other question
    source: $.fn.autocomplete.sources.hits(index, {
      hitsPerPage: 15,
    }),
    displayKey: 'code',
    templates: {
      suggestion: function(suggestion) {
        const markup = `
          <div class="row">
              <div class="col-xs-1 col-sm-1 col-md-1 nopadding">
                  <img src="${suggestion.image}" alt="" class="algolia-thumb">
              </div>
              <div class="col-xs-11 col-sm-11 col-md-11">
                  <div class="row">
                      <div class="col-xs-6 col-sm-8 col-md-8">
                          <span>${suggestion._highlightResult.code.value}</span>
                      </div>
                      <div class="col-xs-6 col-sm-4 col-md-4">
                          <span>Available Qty: ${suggestion.quantityAvailable.toLocaleString()}</span>
                      </div>
                  </div>
                  <div class="row hidden-xs">
                      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                          <span>${suggestion.description}</span>
                      </div>
                  </div>
              </div>
          </div>`;

        return `<div class="algolia-result">${markup}</div>`;
      }
    }
  };
});

$('#aa-search-input').autocomplete({
    hint: true,
    debug: true,
    templates: {
         empty: `<div class="algolia-result"><span> No results were found with your current selection.</span></div>`
    }
  },
  sources
).on('autocomplete:selected', function(event, suggestion, dataset) {
  window.location.href = window.location.origin + '/' + suggestion.url
});

我在这里做了几件很酷的事情。

1. 我正在遍历一个数组，该数组包含我要查询的索引的名称。这能够显着减少我将根据 Algolia 的教程编写的冗余代码。
2. 我在更多研究中发现，我可以在根 autocomplete() 函数中使用“默认模板”作为选项。使用该默认模板就像向其添加“空”选项一样简单。此选项检查所有数据集是否为空，然后在我的情况下，显示一个简单的 div。

感谢这些作者让我找到了解决方案。

• https://github.com/algolia/autocomplete.js/blob/master/README.md#events - 告诉我有一个 autocomplete:empty 函数
• https://github.com/algolia/autocomplete.js/issues/102#issuecomment-236410594 - 发现您可以将默认模板添加到自动完成的根目录。

可以在这里找到一个正常工作的小提琴：http://jsfiddle.net/jandk4014/rtkhw7o0/43/