仅当搜索框不为空时显示项目命中内容

Question

我的 jekyll 站点的 algolia 文件中有这个。

<script>
const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  apiKey: '{{ site.algolia.search_only_api_key }}',
  indexName: '{{ site.algolia.index_name }}',
  searchParameters: {
    restrictSearchableAttributes: [
      'title',
      'content'
    ],
    facetFilters: ['type:post']
  },
});

const hitTemplate = function(hit) {
  let date = '';
  if (hit.date) {
    date = moment.unix(hit.date).format('L');
    // date = moment.unix(hit.date).format('MMM Do YY');
    modifiedDate = moment.unix(hit.last_modified_at).format('MMM Do YY');
  }
  const url = hit.url;
  const title = hit._highlightResult.title.value;
  const content = hit._highlightResult.html.value;

  return `
    <div class="post-list">
      <span class="post-date-list-wrap">
      <span class="post-date-list">${date}
      <span class="post-title"><a href=".${url}"> ${title} </a> </span>
      </span>
       ${content}
    </div>
  `;
}

const hitTemplateTrans = function(hit) {
  let date = '';
  if (hit.date) {
    date = moment.unix(hit.date).format('MMM DD YYYY');
  }
  const url = hit.url;
  const title = hit._highlightResult.title.value;
  const content = hit._highlightResult.html.value;

  return `
    <div class="post-list">
      <span class="post-date-list-wrap">
      <span class="post-date-list">${date}
        <span class="post-title"><a href=".${url}"> ${title}</a></span>
       </span>
       </span>
    </div>
  `;
}

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    placeholder: 'search notes',
    autofocus: true
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#search-hits',
    templates: {
      empty: 'No results',
      item: hitTemplate
    },
  })
);

search.start();
</script>

无需在搜索框中输入任何内容，我就有了文章列表与摘录，文章的简短介绍。那是因为我有 ${content} 可以在有人时显示亮点输入搜索词。

很好，一切正常，但是...我不想在搜索框为空时显示每个项目的内容。如果搜索框为空，我只想保留标题和日期但如果搜索框不为空，则照常显示 title/date 和摘录。

这看起来很容易，但我现在卡住了，我尝试删除内容标签并放入命中转换功能，但它不起作用。

Answer 1

instantsearch.js库有一个函数钩子，叫做searchFunction，你可以在实例化库的时候定义。在执行任何搜索之前调用它。您可以使用它来检查当前查询是否为空，并根据此信息调整您的布局。

这里是一个稍微编辑过的脚本（删除了不相关的部分），应该可以让您做您正在寻找的事情：

let additionalClass = '';
const search = instantsearch({
  […]
  searchFunction: function(helper) {
    if (helper.getState().query === '') {
      additionalClass = 'post-item__empty-query';
    } else {
      additionalClass = '';
    }
    helper.search()
  }
});

[…]

const hitTemplate = function(hit) {
  return 
    `<div class="post-item ${additionalClass}">
        […]
    </div>`
  ;
}

.post-item__empty-query .post-snippet {
  display: none;
}

它所做的是定义一个全局变量 (additionalClass)，该变量将在命中模板中使用（在根级别与 item-post 一起添加）。

在每次搜索之前，我们都会检查查询是否为空。如果是这样，我们将 additionalClass 设置为 item-post__empty_query。我们在CSS中也定义了当应用这个class时，内容应该被隐藏。

所有这些加起来使得在不执行搜索时显示标题+日期，并且仅在搜索实际关键字时显示内容。

希望对您有所帮助，

仅当搜索框不为空时显示项目命中内容

Show the item hit content only when the search box is not empty

search

algolia