仅当搜索框不为空时才显示项目匹配内容
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仅当搜索框不为空时才显示项目匹配内容相关的知识,希望对你有一定的参考价值。
我在我的algolia文件中为我的jekyll网站提供了这个。
<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}
来显示突出显示。
这很好,一切正常但是...我不想在搜索框为空时显示每个项目的内容。如果搜索框为空,我只想保留标题和日期,但如果搜索框不为空,则只显示标题/日期和摘录。
这似乎是一个简单的任务,但我现在卡住了,我尝试删除内容标记并放入命中转换功能,但它不起作用。
答案
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中定义,当应用此类时,应隐藏内容。
所有这些一起使得在不执行搜索时显示标题+日期,并且仅在搜索实际关键字时显示内容。
希望有所帮助,
以上是关于仅当搜索框不为空时才显示项目匹配内容的主要内容,如果未能解决你的问题,请参考以下文章