javascript - 如何隐藏动态 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>

我的问题是，即使有一个子 div 类为“aa-suggestions”，类为“algolia-empty”的 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 - 告诉我有一个自动完成:空函数
• > https://github.com/algolia/autocomplete.js/issues/102#issuecomment-236410594 - 发现您可以将默认模板添加到自动完成的根。

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