typeahead.js Bloodhound 初始化并清除不工作答案

【问题标题】：typeahead.js Bloodhound initialize and clear not workingtypeahead.js Bloodhound 初始化并清除不工作
【发布时间】：2016-07-16 21:46:30
【问题描述】：

我有 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 成功中的注释行）

【问题讨论】：

标签： javascript twitter typeahead.js

【解决方案1】：

这不是解决方案，而是解决方法：

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

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

通过将实例替换为新实例来重新初始化您的 Bloodhound，而不是使用 clear() 和 initialize()

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

重新初始化你的 typeahead 对象

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

远非最佳，但对我有用。

【讨论】：