Javascript 更新或更改typeahead数据

Javascript 更新或更改typeahead数据,javascript,autocomplete,typeahead.js,twitter-typeahead,Javascript,Autocomplete,Typeahead.js,Twitter Typeahead,我正在使用这个typeahead库: 我设法创建了一个与他们在页面上使用本地值相同的示例 $( document ).ready(function() { var globalResults = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","I

我正在使用这个typeahead库:

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

$( 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仍然显示相同的旧结果阿拉巴马州

我正试图以这种方式更新它们,但不起作用:

globalResults = results;
var autocomplete = $('#search-input').data('typeahead');
autocomplete.source = globalResults;
结果以字符串数组形式从服务器检索。我调试了它,它包含了新的数据,它确实将它们复制到了GlobalResults中并进行了更新。但不知何故,这句话毫无用处:

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>

我能够更新使用的数据源的唯一方法是使用带有TypeaheadJS的嗜血犬DJ

我初始化一个本地源:

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'];
以及另一个当地来源:

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'];
我创建了一个侦探犬实例,并将其设置为本地数据源:

var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: globalResults
});
我创建了一个在源之间切换的方法。在这种情况下,我使用按钮并在
上单击
,进行更改:

$(document).on('click', '#changeSource', function() {
    console.log('change the data');
  states.clear();
  states.local = otherResults;
  states.initialize(true);
});
这也适用于远程数据


.

这将清除当前基准并重新加载数据:

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

如果只更新globalResults变量并删除其余的更改/更新尝试,会发生什么情况?globalResults有新值,但提前键入显示旧值。太棒了,谢谢你帮了我这么多!!它也可以完美地处理远程数据。万分感谢!为JSFIDLE竖起大拇指。