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

时间：2018-08-23 17:57:57

标签： javascript jquery html css algolia

我正在使用名为Algolia的服务，该服务的工作方式类似于单页Search Appliance。当用户输入要搜索的字词时，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>

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

enter image description here

始终显示“ algolia-empty”类，因为Algolia以此方式构建了产品。

问题

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

可以在这里找到有效的JSFiddle：http://jsfiddle.net/jandk4014/8vktn0cu/44/

更新

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

enter image description here

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

1 个答案:

答案 0 :(得分：0)

我发现可以通过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。

感谢这些作者帮助我解决问题。

可以在这里找到有效的小提琴：http://jsfiddle.net/jandk4014/rtkhw7o0/43/

相关问题
最新问题