typeahead.js提示并突出显示param无法使用prefetch和remote

Question

我按照这里的说明用血猎犬实现了类型:http: //twitter.github.io/typeahead.js/examples/#bloodhound

这是我的HTML:

<div id="remote">
  <input class="typeahead" type="text" placeholder="Search for cast and directors"> 
</div>

这是我的js:

$(document).ready(function() {
var castDirectors = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../api/v1/search/people_typeahead',
  remote: '../api/v1/search/people_typeahead?q=%QUERY',
    dupDetector: function(remoteMatch, localMatch) {
        return remoteMatch.value === localMatch.value;
    }
});

castDirectors.initialize();

$('#remote .typeahead').typeahead(null, {
  name: 'cast-directors',
  displayKey: 'value',
  source: castDirectors.ttAdapter(),
    hint: false,
    highlight: true,
    templates: {
        empty: [
      '<div class="empty-message">',
      'No matching names',
      '</div>'
    ].join('\n'),
        suggestion: Handlebars.compile('<a id="typeahead" href="{{link}}"><p>{{value}}</p></a>')
    }       
});
});

但是,即使提示设置为false并且突出显示设置为true,我仍然会看到提示,而不是在预先输入中获得高亮显示.我应该改变什么？

Answer 1

尝试放置提示,突出显示并添加minLength:1而不是第一个null,它应如下所示:

$('#remote .typeahead').typeahead(
{
    hint: false,
    highlight: true,
    minLength: 1
},
{
  name: 'cast-directors',
  displayKey: 'value',
  source: castDirectors.ttAdapter(),

    templates: {
        empty: [
      '<div class="empty-message">',
      'No matching names',
      '</div>'
    ].join('\n'),
        suggestion: Handlebars.compile('<a id="typeahead" href="{{link}}"><p>{{value}}</p></a>')
    }       
});

Answer 2

不幸的是，typeahead.js 站点上远程示例的代码没有在typeahead()函数调用中使用选项，复制/粘贴会导致您遇到这个问题。

正如prsnca所指出的那样，您必须确保在函数的第一个参数中添加这些选项。

无亮点

$('#remote .typeahead').typeahead(null, {
  name: 'best-pictures',
  displayKey: 'value',
  source: bestPictures.ttAdapter()
});

强调

$('#remote .typeahead').typeahead(
  {
    hint: false,
    highlight: true,
    minLength: 1
  },
  {
    name: 'best-pictures',
    displayKey: 'value',
    source: bestPictures.ttAdapter()
  }
);