0

I'm using Algolia's autocomplete.js (jQuery version)

I'd like to show some extra text in the dropdown's footer if and only if there are more than 5 results for either of the 2 data sources I'm searching within

i.e. "See more / all results". I'd prefer to show this in the 'outer' footer (i.e. not the footer that is specific to just one source)

In all other conditions (eg no results in either data source, or less than 5 in both sources), I'd like to hide this text

How can I do this? My current code below

  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";
                });
user6122500
  • 892
  • 1
  • 15
  • 31

1 Answers1

0

Unfortunately, autocomplete.js's datasets/sources are independent and asynchronous... therefore such footer conditions are not really implementable :/

This would require a deeper rewriting.

redox
  • 2,269
  • 13
  • 22
  • Thanks. Using a parallel query to get the number of hits, see below. But 'c' is undefined. Can you help? var client = algoliasearch(...); var in = client.initIndex('c'); $('#search').change(function(){ var st = $(this).val(); in.search(st, function searchDone(err, content) { if (err) { c = 0; } else { c = content.nbHits; } }); alert(c); – user6122500 Feb 06 '17 at 12:10
  • Remember that the callbacks will be called asynchronously. You cannot use such code to display/alert the value -> you need to make it more JavaScript-compliant. – redox Feb 08 '17 at 21:01