Question

我已经多次尝试使typeahead.js 0.10正常工作，只能让它与本地数据集一起使用。

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

老实说，“datumTokenizer：function（d）{return Bloodhound.tokenizers.whitespace（d.value）;}，”实际上做了什么？什么意思是空白......

好吧，我离开这里是我当前的例子，期望有人可以帮助我理解如何使用它。

如果可能，请您使用filter选项添加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和class delcaration有共同点，如果我使用下面的代码，它只是在你的输入周围添加一个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()

  })


});

这是一个使用与本地商店http://jsfiddle.net/qLk8c/

相同的数据的jsfiddle

无法通过预取工作使用猎犬使Twitter预先输入0.10

1 个答案: