Bootstrap 3 typeahead.js - zdalne atrybuty adresu URL

Question

Próbuję wywołać mój adres zdalny z dodanymi atrybutami do adresu URL.

Na razie mam tej pracy:

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

Teraz chciałbym zrobić coś takiego:

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

Chciałbym dodać atrybut get „sport” do adresu URL tak Mogę zawęzić moje zapytanie na zapleczu. Próbowałem powyższego kodu, ale otrzymałem błąd JS.

Poprzednia wersja Bootstrap Typeahead zezwalała na ten typ konfiguracji. Było to bardzo przydatne, ponieważ mogłem zaktualizować zdalny adres URL za każdym razem, gdy klucz został trafiony.

Czy masz pomysł na wykonanie tej pracy dla tej wersji?

Answer 1

remote jest wyłącznie dla typeahead.js (nie jest częścią Bootstrap). Ale nie używasz poprawnie remote, może to być string lub obiekt, a nie funkcja.

Kiedy trzeba zmienić żądania URL, można użyć 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 
}); 

Sprawdź docs here

Nadzieję, że to pomaga.

Answer 2

Oto pełny przykład z wynikiem QUERY również przekazanym. Zwróć uwagę, że gdy używana jest metoda zdalna, zastępowanie zmiennych nie działa. Dzięki hieu-nguyen dla większości!

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

Rozwiązanie Hieu Nguyen nie działa dla znaków% QUERY. Według dokumentacji Bloodhound.js,

zastąpić - .... Jeśli ustawione, nie substytucja wieloznaczny będą wykonywane w adresie URL.

Bloodhound docs on github

Więc% zapytanie zostanie przekazany jako ciąg bez zastąpiony tekstem wprowadzonym od użytkownika.

Więc należy umieścić wartość wpisywanie znaków z wyprzedzeniem do adresu 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 

});