更新或更改预输入数据

Question

我正在使用这个 typeahead 库：http://twitter.github.io/typeahead.js/

我设法创建了一个与他们在页面上相同的具有本地值的示例。

$( document ).ready(function() {
  var globalResults = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];

  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;

      // an array that will be populated with substring matches
      matches = [];

      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');

      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });

      cb(matches);
    };
  };

  $('#search-input').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'globalResults',
    source: substringMatcher(globalResults)
  });
});

问题是当我更新 globalResults 时，预输入仍然显示相同的旧结果 Alambama, Alaska...

我正在尝试以这种方式更新它们，但它不起作用：

globalResults = results;
var autocomplete = $('#search-input').data('typeahead');
autocomplete.source = globalResults;

结果以字符串数组的形式从服务器检索。我调试了它，它包含了新数据，它确实将它们复制到 globalResultes 并更新了它。但不知何故，这条线什么也没做：

autocomplete.source = globalResults;

typeahead 源未更新的问题可能在哪里？

我的 html 看起来像这样：

<span style="position: relative; display: inline-block;" class="twitter-typeahead">
            <input type="text" spellcheck="true" class="form-control typeahead tt-input" placeholder="Search for science, search for data ..." id="search-input" autocomplete="off"></input>
</span>

Answer 1

我能够更新使用的数据源的唯一方法是使用带有 TypeaheadJS 的 BloodhoundJS。

我初始化一个本地源：

var globalResults = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

还有一个替代的本地来源：

var otherResults = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

我创建了一个 Bloodhound 实例并将其设置为本地数据源：

var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: globalResults
});

我创建了一种在源之间切换的方法。在这种情况下，我使用一个按钮并在 click 上进行更改：

$(document).on('click', '#changeSource', function() {
    console.log('change the data');
  states.clear();
  states.local = otherResults;
  states.initialize(true);
});

这也适用于远程数据。

Here is a fiddle demonstration.

Answer 2

这将清除当前数据并重新加载数据：

states.clear();
states.clearPrefetchCache();
states.clearRemoteCache();
states.initialize(true);