Bootstrap 3 typeahead.js - attributi url remoti

Question

Sto provando a chiamare il mio URL remoto con gli attributi aggiunti all'URL.

Per ora ho questo lavoro:

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

Ora vorrei fare qualcosa di simile:

$('#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 
}); 

Vorrei aggiungere l'attributo get 'sport' per l'URL in modo Posso restringere la mia domanda sul back-end. Ho provato il codice sopra ma ottengo un errore JS.

La versione precedente di Bootstrap Typeahead consentiva questo tipo di installazione. È stato molto utile in quanto ho potuto aggiornare l'URL remoto ogni volta che una chiave viene colpita.

Qualche idea su come farlo funzionare per questa versione?

Answer 1

remote è esclusivamente per typeahead.js (non parte di Bootstrap). Ma non stai usando correttamente il remote, può essere una stringa o un oggetto , non una funzione.

Quando è necessario modificare l'URL richiesta, è possibile utilizzare replace:

$('#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 
}); 

Controllare la documentazione here

Speranza che aiuta.

Answer 2

Ecco un esempio completo con anche il risultato QUERY passato. Si noti che quando viene utilizzato il metodo remoto, la sostituzione delle variabili non funziona più. Grazie a hieu-nguyen per la maggior parte!

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

La soluzione Hieu Nguyen non funziona per i caratteri% QUERY. Secondo la documentazione Bloodhound.js,

sostituire - .... Se impostata, nessuna sostituzione jolly verrà eseguita su URL.

Bloodhound docs on github

Così% QUERY verrà passato come stringa senza essere sostituito da testo immesso dall'utente.

Quindi si dovrebbe mettere il valore typeahead nel vostro url:

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

});