无法使用带有预取功能的 Bloodhound 使 Twitter typeahead 0.10 工作

Question

我已经多次尝试使 typeahead.js 0.10 能够工作，并且只能使其与本地数据集一起工作。

使用预取或远程选项时，即使遵循示例页面，它也不起作用。要么我使用错误的语法格式化 json 文件和/或弄乱了寻血犬选项。

老实说，“datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }”实际上是做什么的？空格是什么意思...

好吧，我把我当前的例子留在这里，希望有人能帮助我理解如何使用它。

如果可能的话，能否请您添加一个使用过滤器选项的 Bloodhound 示例，以及正在使用的 json 文件示例。

JSON 文件

     [
{
  "year": "1961",
  "value": "Test Side Story",
  "tokens": [
    "West",
    "Side",
    "Story"
  ]
},
{
  "year": "1962",
  "value": "Tawrence of Arabia",
  "tokens": [
    "Lawrence",
    "of",
    "Arabia"
  ]
},
{
  "year": "1963",
  "value": "Tom Jones",
  "tokens": [
    "Tom",
    "Jones"
  ]
},
{
  "year": "2012",
  "value": "Argo",
  "tokens": [
    "Argo"
  ]
}

]

Typeahead 0.10 脚本

       <script>
var films = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'http://localhost/dh/js/films.json'
});

films.initialize();

$('#cenas0').typeahead(null, {
displayKey: 'value',
source: films.ttAdapter(),
templates: {
suggestion: Handlebars.compile(
'<p><strong>{{value}}</strong> – {{year}}</p>'
)
}
});
</script>

HTML 代码（带有一些脚本声明）

     <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>


<input id="cenas0" class="typeahead" placeholder="cenas0"></input>

Answer 1

我很确定，奇怪的是，它与 html div 和类声明有关，如果我使用以下代码，它只是在您的输入周围添加一个 div 包装器，那么它似乎工作正常（使用 jquery 1.9. 1、提前输入最新包）

html

    <div class="films">
 <input class="typeahead" name="film" type="text" autocomplete="off" value="">   

    </div>

js 代码（我只剩下车把部分）

 var films = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
  prefetch: "js/films.json"


  });

  films.initialize();

  $('.films .typeahead').typeahead(null, {

    displayKey: 'value',
    source: films.ttAdapter()

  })


});

这是一个 jsfiddle，使用与本地存储相同的数据 http://jsfiddle.net/qLk8c/