Bootstrap 3 typeahead.js - thuộc tính url từ xa

Question

Tôi đang cố gắng gọi url từ xa của tôi với các thuộc tính được thêm vào url.

Để bây giờ tôi đã làm việc này:

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

Bây giờ tôi muốn làm một cái gì đó như thế này:

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

Tôi muốn thêm thuộc tính GET 'thể thao' vào URL để Tôi có thể thu hẹp truy vấn của mình trên chương trình phụ trợ. Tôi đã thử mã ở trên nhưng tôi nhận được một lỗi JS.

Phiên bản trước của Bootstrap Typeahead cho phép loại thiết lập này. Nó rất hữu ích vì tôi có thể cập nhật URL từ xa mỗi khi một phím được nhấn.

Bất kỳ ý tưởng nào về cách thực hiện công việc đó cho phiên bản này?

Answer 1

remote là dành riêng cho typeahead.js (không phải là một phần của Bootstrap). Nhưng bạn không sử dụng chính xác remote, nó có thể là chuỗi hoặc một đối tượng , không phải chức năng.

Khi bạn cần thay đổi URL yêu cầu, bạn có thể sử dụng 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 
}); 

Kiểm tra các tài liệu here

Hy vọng nó giúp.

Answer 2

Dưới đây là ví dụ hoàn chỉnh với kết quả QUERY cũng được chuyển. Lưu ý rằng khi phương thức từ xa được sử dụng, thay thế biến không còn hoạt động nữa. Nhờ có hieu-nguyen cho phần lớn số tiền đó!

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

Giải pháp Hiếu Nguyễn sẽ không hoạt động cho% QUERY ký tự đại diện. Theo tài liệu về Bloodhound.js,

thay thế - .... Nếu được đặt, không có thay thế ký tự đại diện nào được thực hiện trên url.

Bloodhound docs on github

Vậy% QUERY sẽ được thông qua như là chuỗi mà không được thay thế bằng văn bản nhập từ người dùng.

Vì vậy, bạn nên đặt giá trị typeahead vào url của bạn:

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

});