typeahead.js
typeahead.js copied to clipboard
twitter
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?
Makes sense and it's a very reasonable request. The hard part will be coming up with an elegant way of supporting this.
It would be great if we could pass a template hash to the typeahead options.
jQuery#typeahead({
minLength: 3,
highlight: true,
template: {
empty: '...'
}
}, [*datasets])
The header and the footer also make sense to be defined globally.
+1, this would be very useful for a typeahead where the user can create a new "item" to be in the list.
ie... if text typed is not in the list the user can click to take an action like "add as option"
It's not quite the same, but I came across this looking for a way to trigger an external action when there are no results (in my case I'm showing a large element with instructions which wouldn't fit in the typeahead menu). Here is how I trigger a 'typeahead:empty' event, the same could possibly be used to render a custom empty message in the menu:
input.on('typeahead:asyncreceive', function() {
if ($(this).data('tt-typeahead').menu._allDatasetsEmpty()) {
$(this).trigger('typeahead:empty')
}
})
I found a workaround for the multiple notFound messages.
First, I wrapped the input in a div to easily get back to the parent:
$(element).wrap('<div class="my-typeahead"></div>');
Second, you will need to add a special class to the notFound messages div. This will need to be applied to all datasets. I chose tt-none:
templates: {
notFound: '<div class="tt-suggestion tt-none">There are no results for your search.</div>',
}
Next, I added a listener on the typeahead:render:
...
.on('typeahead:render', function(e, objs, async, name) {
var nones = $(element).closest('.my-typeahead').find('.tt-none');
var suggestions = $(element).closest('.my-typeahead').find('.tt-suggestion.tt-selectable');
// Hide all notFound messages
nones.hide();
// Only show the first message if there are zero results available
if(suggestions.length === 0) {
nones.first().show();
}
});
...
What this does for me is that it only displays one of the notFound messages when there are no suggestions available for any of your datasets, which is what I need. I hope this helps others.
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();
}
});
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();
}
});
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(); } });
Works, but I also added it after async request results that I monitor on start and end by listening events
