更新或更改预先输入的数据

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

这也适用于远程数据.

这是一个小提示演示.