Question

我正在使用Algolia的autocomplete.js（jQuery版本）

我想在下拉菜单中显示一些额外的文字，当且仅当我在

中搜索的2个数据源中的任何一个有超过5个结果时

即。＆＃34;查看更多/所有结果＆＃34;。我更愿意在“外部”中展示这一点。页脚（即不是仅针对一个来源的页脚）

在所有其他条件下（例如，两个数据源都没有结果，或两个来源都不到5），我想隐藏此文本

我该怎么做？我目前的代码

  var index_classes = client.initIndex('classes');
  var index_stories = client.initIndex('articles');

$('input[name="search_text"]').autocomplete(
                    { autoselect:true, debug:true,
                      templates: {
                          footer: '<span id="see-all-sr"><hr><a href="#" style="size:16px;padding-left:12px">See all results</a><br>&nbsp<span>'
                      }
                    }, [
                    {
                        source: $.fn.autocomplete.sources.hits(index_classes, { hitsPerPage: 5 }),
                        displayKey: 'name',
                        name: 'class',
                        templates: {
                            header: '<div class="aa-suggestions-category">Classes</div>',
                            suggestion: function(suggestion) {
                                return '<img src="/images/class/' + suggestion.id + '_100.jpg">' + '<div><span>' +
                                    suggestion._highlightResult.name.value + '</span><span>'
                                    + suggestion._highlightResult.teacher_name.value + '</span>';
                            },
                            empty: '<div class="aa-empty">No results. See <a href="/classes">all classes</a></div>',
                        }
                    },
                        {
                            source: $.fn.autocomplete.sources.hits(index_stories, { hitsPerPage: 5 }),
                            displayKey: 'title',
                            name: 'story',
                            templates: {
                                header: '<div class="aa-suggestions-category">Stories</div>',
                                suggestion: function(suggestion) {
                                    return '<img src="/images/article/' + suggestion.id + '_100.jpg">' + '<div><span>' +
                                        suggestion._highlightResult.title.value + '</span><span>' +
                                        suggestion._highlightResult.author_name.value + '</span></div>';
                                },
                                empty: '<div class="aa-empty">No results. See <a href="/stories">all stories</a></div>',
                            }
                        }

                ]).on('autocomplete:empty', function() {
                    document.getElementById('see-all-sr').style.display = "none";
                });

Answer 1

不幸的是，autocomplete.js的数据集/来源是独立的和异步的...因此这样的页脚条件实际上是不可实现的：/

这需要更深层的重写。

Algolia自动完成 - 仅显示大于X的结果

1 个答案: