Bootstrap 3 typeahead.js - Remote-URL-Attribute

Question

Ich versuche, meine Remote-URL mit zusätzlichen Attributen der URL aufrufen.

Für jetzt habe ich diese Arbeit:

$('#league').typeahead({ 
     remote: '/typeahead/get_league?query=%QUERY', 
     limit: 10 
}); 

Nun möchte Ich mag so etwas tun:

$('#league').typeahead({ 
     remote: function() { 
      var q = '/typeahead/get_league?query=%QUERY'; 
      if ($('#sport').val()) 
       q += "&sport=" + encodeURIComponent($('#sport').val()); 
      return base_url + q; 
     }, 
     limit: 10 
}); 

Ich mag würde die GET-Attribut ‚Sport‘ an die URL hinzuzufügen, so Ich kann meine Abfrage im Backend eingrenzen. Ich habe den obigen Code ausprobiert, bekomme aber einen JS-Fehler.

Die vorherige Version von Bootstrap Typeahead erlaubt diese Art von Setup. Es war sehr nützlich, da ich die entfernte URL jedes Mal aktualisieren konnte, wenn ein Schlüssel getroffen wurde.

Irgendeine Idee, wie man das für diese Version macht?

Answer 1

remote ist ausschließlich für typeahead.js (nicht Teil von Bootstrap). Aber Sie verwenden nicht die remote richtig, es kann entweder eine Zeichenfolge oder Objekt, keine Funktion sein.

Wenn Sie die URL ändern müssen, können Sie replace verwenden:

$('#league').typeahead({ 
    remote: { 
     url: '/typeahead/get_league?query=%QUERY', 
     replace: function() { 
      var q = '/typeahead/get_league?query=%QUERY'; 
      if ($('#sport').val()) { 
       q += "&sport=" + encodeURIComponent($('#sport').val()); 
      } 
      return base_url + q; 
     } 
    }, 
    limit: 10 
}); 

Überprüfen Sie die docs here

Hoffe, es hilft.

Answer 2

Hier ist ein vollständiges Beispiel mit dem QUERY-Ergebnis. Beachten Sie, dass bei Verwendung der Remote-Methode die Variablensubstitution nicht mehr funktioniert. Danke an hieu-nguyen für den Großteil davon!

jQuery('#city').typeahead({ 
    name: "cities", 
    remote: { 
     url: current_web_root + '?action=ajax|getcities&query=%QUERY', 
     replace: function() { 
      var q = current_web_root + '?action=ajax|getcities&query=' + jQuery('#city').val(); 
      if (jQuery('#state').val()) { 
       q += "&state=" + encodeURIComponent(jQuery('#state').val()); 
      } 
      return q; 
     } 
    },  
    cache: false 
}); 

jQuery("#state").change(function (e) { 
    jQuery('#city').val(""); 
}); 

Answer 3

Hieu Nguyen Lösung wird nicht für% QUERY Wildcards funktionieren. Gemäß Bloodhound.js Dokumentation,

ersetzen - .... Wenn gesetzt, wird keine Platzhalter Ersetzung auf URL durchgeführt werden.

Bloodhound docs on github

So wird% QUERY als String übergeben werden, ohne vom Benutzer eingegebenen Text durch ersetzt.

So sollten Sie typeahead Wert in Ihre URL setzen:

$('#league').typeahead({ 
remote: { 
    url: '/typeahead/get_league?query=%QUERY', 
    replace: function() { 
     var q = '/typeahead/get_league?query=' + $('#league').val(); 
     if ($('#sport').val()) { 
      q += "&sport=" + encodeURIComponent($('#sport').val()); 
     } 
     return base_url + q; 
    } 
}, 
limit: 10 

});