更新或更改预输入数据

Question

我正在使用这个提前输入库：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 时，typeahead 仍然显示相同的旧结果 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

我能够更新所用数据源的唯一方法是将 BloodhoundJS 与 TypeaheadJS 结合使用。

我初始化一个本地源：

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);

更新或更改预输入数据

Update or change typeahead data

javascript

autocomplete

typeahead.js

twitter-typeahead