How to show “No Results Found” with typeahead.js?

Question

I am trying to show results not found message when there's no suggestion from user input. typeahead.js shows input suggestion while giving input to text field..if there no suggestion found then how to show results not found message?.. version is typeahead.js 0.11.1

Answer 1

You can check if no result with empty parameter:

I have edited above code a little bit so that it may help to others searching the same thing.

$('.typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 3,
},
{
    name: 'firstnames',
    displayKey: 'value',
    source: firstnames.ttAdapter(), // this is your result variable
    templates: {
        empty: function(context){
        //  console.log(1) // put here your code when result not found
          $(".tt-dataset").text('No Results Found');
        }
    }

Answer 2

I have the same issue. But i'm using ajax for my source not adapter.
You can try adding popover if suggestions length is 0.

function BindControls_facility(facility_names,facility_details,id) {
    var timeout;
    $('#facility_names'+id).typeahead({
        items: "all",
        // source: facility_names,
         source : function (query, result) {
              if (timeout) {
                    clearTimeout(timeout);
                }

                timeout = setTimeout(function() {
                        $.ajax({
                    url:  master_url + "/facility_name_dropdown_list",
                    method: 'POST',
                    xhrFields: {
                        withCredentials: false
                    },
                    data: { input_query : query},
                    success: function (data) {
                        if(Object.keys(data.facility_name).length > 0){
                            // $("#facility_names"+id).popover('destroy');
                             result($.map(data.facility_name, function (item) {
                                return item;
                            }));
                        }
                        else{
                             $('#facility_names'+id).popover({container: '#botdiv'+id,placement: 'top'}).popover('show');
                             $('#facility_names'+id).attr('data-content','No result found for \"'+$("#facility_names"+id).val()+'\"').data('bs.popover').setContent();
                             setTimeout(function () {
                                 $('#facility_names'+id).popover('destroy');
                             }, 2000);
                         }

                    }
                });
                }, 300);

        },
        hint: true,
        highlight: true,
        cache: true,
        compression: true,
        minLength: 3,
        updater: function(item) {
             var details = "";
              $.ajax({
                url:  master_url + "/get_facility_name",
                method: 'POST',
                xhrFields: {
                    withCredentials: false
                },
                data: { facility_name : item},
                success: function (data) {
                    console.log(data.status);
                }
            });
            return item;
        }
    });
}

I tried showing this " no results found " warning using bootstrap-popover . I know its not a good one to try but i just shared my way to achieve this if i had the same issue.