Wie zeige ich "Keine Ergebnisse gefunden" mit typeahead.js?

Question

Ich versuche, results not found Nachricht anzuzeigen, wenn es keinen Vorschlag von Benutzereingaben gibt. typeahead.js zeigt Eingangs Vorschlag, während der Eingang geben field..if es keinen Vorschlag dann gefunden, um Text wie results not found Nachricht zeigen? .. Version typeahead.js ist 0.11.1

Answer 1

Sie können kein Ergebnis überprüfen, ob mit empty Parameter:

Ich habe obigen Code ein wenig bearbeitet, so dass es anderen helfen kann, die gleiche Sache zu suchen.

$('.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

Ich habe das gleiche Problem. Aber ich benutze Ajax für meine Quelle nicht Adapter.
können Sie versuchen, popover hinzufügen, wenn Vorschläge Länge 0 ist

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; 
     } 
    }); 
} 

ich versucht, dies zeigt Warnung „keine Ergebnisse gefunden“ mit Bootstrap-popover. Ich weiß, es ist nicht gut zu versuchen, aber ich habe meinen Weg geteilt, um dies zu erreichen, wenn ich das gleiche Problem hatte.