Question

我有2个文本字段，一个是城市，另一个是电影，电影下拉的建议是根据城市填充的。选择城市后，我会拨打ajax电话来获取城市中的电影。所以现在，我需要用响应来填充电影字段的来源。所以我尝试使用 Bloodhound.clear 清除值并使用 Bloodhound.add 从响应中添加值，但它似乎不起作用。以下是代码

var movies = [];
var movieEngine = new Bloodhound({
   /*initialize: false,*/
   datumTokenizer: Bloodhound.tokenizers.whitespace,
   queryTokenizer: Bloodhound.tokenizers.whitespace,
   local : movies
});

 $('#city').on('blur', function(ev) {
    if($(ev.target).val().trim() == "")
        $('#city_error').html("Please select a city");
    else{
        $('#city_error').html("");
        var jqxhr = $.ajax({
            url:'/movie',
            method: 'GET',
            data: {
                'city': $('#city').val()
            }
        });
        jqxhr.done(function(data){
            movieEngine.clear();
            movieEngine.add(Object.keys(data.movieList));
            /*movies = Object.keys(data.movieList);
            movieEngine.initialize(true);*/
        });
    }
});


var movie_typeahead = $('#movie').typeahead({
    hint: false,
    highlight: true,
    minLength: 1
},{
    source: movieEngine
});

如上所示，我根据所选择的城市填写了电影下拉菜单的建议，但它似乎无法正常工作。我甚至尝试了Bloodhound引擎的另一个选项，在我得到响应之后进行初始化（ajax成功中的注释行）

Answer 1

这不是解决方案，而是一种变通方法：

销毁当前的 typeahead 对象。如果省略此步骤，则预先输入可能会显示两个带有建议的选项框。

movie_typeahead = $('#movie').typeahead('destroy');

通过用新的实例替换实例而不是使用 clear() 和 initialize()

来重新初始化您的 Bloodhound

jqxhr.done(function(data){
      movieEngine = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.whitespace,
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          local: data.movieList
      });
});

重新初始化您的预输入对象

    var movie_typeahead = $('#movie').typeahead({
        hint: false,
        highlight: true,
        minLength: 1
    },{
        source: movieEngine
    });

远非最佳但对我有用。

typeahead.js Bloodhound初始化并清除不起作用

1 个答案: