Bootstrap Typeahead AJAX答案

【问题标题】：Bootstrap Typeahead AJAXBootstrap Typeahead AJAX
【发布时间】：2016-04-02 19:33:02
【问题描述】：

我正在为 Twitter Bootstrap (https://github.com/biggora/bootstrap-ajax-typeahead) 使用 typeahead 的修改版本，它简化了远程数据的使用。我遇到的问题是我的 AJAX 调用 url 取决于我的选择输入中的选定选项。

var subjectId = $('#chapters-open-subject option:selected').val();      
    $('#chapters-edit-title').typeahead({
        onSelect: function(item){
            $('#chapters-edit-submit').attr('disabled',false).removeClass('btn-default').addClass('btn-primary');
        },
        ajax: {
            url: '/admin/misc/chapters/search/'+subjectId
        },
        displayField: 'naslov'
    });

问题是，即使我更改了选择框中的选项，AJAX 请求中的 url 保持不变并且没有相应地更改。我该如何解决这个问题？

【问题讨论】：

您的表达式只计算一次，并且传递给 typeahead 库的 URL 基于执行该代码时 subjectId 的值。换句话说，为了使您编写的内容能够正常工作，每次#chapters-open-subject select 的值发生变化时都必须执行所有这些代码。
您有什么建议吗？
当然，只需将整个代码块包装在$('#chapers-open-subject').on('change', function() { （您的代码在这里） });。不过，如果库无法处理多次调用，这可能是个坏主意。

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您可能能够摆脱这样的困境：

var subjectId = $('#chapters-open-subject option:selected').val();

var $typeahead = $('#chapters-edit-title').typeahead({
    onSelect: function(item){
        $('#chapters-edit-submit').attr('disabled',false).removeClass('btn-default').addClass('btn-primary');
    },
    ajax: {
        url: '/admin/misc/chapters/search/' + subjectId
    },
    displayField: 'naslov'
});

$('#chapters-open-subject').on('change', function() {
    subjectId = $(this).val();
    $typeahead.data('typeahead').options.ajax.url = '/admin/misc/chapters/search/' + subjectId;
});

如果这不起作用，我建议在 GitHub 上发布有关该库的问题。它似乎没有能力在设置后轻松更改 URL。

【讨论】：

【解决方案2】：

ajax : 
{
  preDispatch : function() { return { q: $("#subjectId").val() }},
  url: '/admin/misc/chapters/search/'+ ,
  method : 'get',
  displayField : 'naslov',
}

【讨论】：