No results found option

I know that I can specify an empty template for each dataset, but I have 6 or 7 datasets and I would like to specify something to be displayed when none of the datasets have hits.

If I just type in “4q8nywrfxm”, I don’t want to see 6 datasets all saying that they can’t find that text, I just want one message, specified at the typeahead level (not the dataset level).

Does that make sense?

[jmhmd]

Thanks @lucaspiller and @atrain0789

Here’s another approach building on the snippet from @lucaspiller:

const emptyMessage = `<div class="empty-message">
    No matches found.
  </div>`;
const emptyMessageNode = $(emptyMessage);
// hide empty message by default
emptyMessageNode.hide();
// get menu element and append hidden empty messsage element
const menuNode = $('.typeahead.tt-input').data('tt-typeahead').menu.$node;
menuNode.append(emptyMessageNode);

$('.typeahead').on('typeahead:asyncreceive', function () {
  if ($(this).data('tt-typeahead').menu._allDatasetsEmpty()) {
    // hide dataset result containers
    menuNode.find('.tt-dataset').hide();
    // show empty message and menu
    emptyMessageNode.show();
    menuNode.show();
  } else {
    // show dataset result containers
    menuNode.find('.tt-dataset').show();
    // hide empty message
    emptyMessageNode.hide();
  }
});

[murph133]

I think I’ve found a simple solution for only showing one empty template, when working with multiple datasets.

1. Add an empty template to one dataset If you only want to show the message when ALL are empty, you only need to add one message.

templates: {
    empty: '<div class="empty-message">No results</div>'
}

2. Add event trigger keyup for the typeahead input field (.tt-input)
We don’t want to show an empty message is a suggestion from another dataset. So whenever there is more than 0 suggestions, we hide the empty-message.

$(document).on('keyup', ".tt-input", function() {

    if($(".tt-suggestion").length){
        $(".empty-message").hide();
    }

});