使用Typeahead.js / Bloodhound.js在远程和本地源之间切换

时间:2016-03-30 02:56:21

标签: javascript jquery autocomplete typeahead.js bloodhound

我已经玩过我能想到的每一个设置,例如.clear().typeahead('destroy'),一旦我将源设置为遥控器,我就无法做到使typeahead使用本地源。

有什么想法吗?

以下代码名为onclick

var create_typeahead = function(is_remote, titles){

  filters_typeahead.typeahead('destroy');

  if(is_remote){
        var remote_url = titles;
        var titles = new Bloodhound({
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: remote_url,
                q=%QUERY',
                wildcard: '%QUERY'
            }
        });
  }
  else{
        var titles0 = titles;
        var titles = new Bloodhound({
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
            local: titles0
        });    
  }

  titles.initialize(); 

  filters_typeahead.typeahead({
    highlight: true,
    minLength: 2,

    },
    {
      name: 'titles',
      displayKey: 'name',
      source: titles,
      templates: {
        suggestion: function(data) {
            return '<div>' + data.name + '</div>';
        }
    }
});

};

1 个答案:

答案 0 :(得分:1)

我的回答比你的回答更多,但希望它会指出你正确的方向。

如果您想使用remote更改bloodhound来源,则必须清除该猎犬对象并重新初始化。

这里我正在创建一个初创化的猎犬实例:

var taSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) {
    return obj.Value;
  },
  remote: remoteSrc
});

taSource.initialize(true);

在切换逻辑中,我同时调用clear()initialize(true),为重新初始化参数传递true:

taSource.clear();
taSource.initialize(true);

我处理prepare方法中作为remote对象一部分提供的方法更改网址。

prepare: function(query, settings) {
  settings.url = urlRoot + '/' + whichType + '?q=' + query;
  console.log(settings.url);
  return settings;
},

Here is a full example显示我是如何处理的。