我已经多次尝试使typeahead.js 0.10工作,只能使它与本地数据集一起使用。
使用预取或远程选项时,即使按照示例页面,它也不起作用。 要么我用错误的语法格式化json文件和/或搞乱了bloodhound选项。
老实说,“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>I've already made several attempts to make the typeahead.js 0.10 to work and only can make it work with the local dataset.
When using prefetch or remote option, even following the examples page, it doesn't work. Either I am formatting the json file with the wrong syntax and/or messing up with the bloodhound options.
Honestly, what does the "datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); }," actually do? what does it mean the whitespace...
Well, I leave here my current example with expectations that somebody can help me understand how to use this.
Can you please, if possible, add an example with Bloodhound using the filter option, along with the json file example being used.
JSON file
[ { "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
<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 code (with some script declarations)
<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>更多推荐
发布评论