如何使用Typeahead.js 0.10 step / by / remote / prefetch / local
- POST的Twitter Typeahead
我已经2天了，试图了解并清楚了解如何使用/pipe理typeahead.js 0.10以使用本地，远程和获取的数据。
老实说，猎犬引擎对我来说并不清楚，关于如何操作/访问json对象和数组的详细信息仍然是一个问号。
我可以让本地的例子工作，但任何时候我尝试使用预取或远程选项，除了几个刻度，我不能工作。
我这篇文章的目的不是为了解答我的问题，而是find一个完全了解它的人，并且能够以一种非常简单的方式一步一步地解释（包括examples / jsfiddles-包括json的例子，知道什么是实际parsing）如何工作。
我想很多人都期待着理解它，这将是一个伟大的贡献（正如我们所知的其他详细的post一样）。
我想这是艰苦的工作。
预先感谢您的贡献者。
遵循下面的build议。 我的简单例子。
JSON文件
[ { "name": "Pink Floyd", "Album": "The Best Of Pink Floyd: A Foot In The Door", "Label": "EMI UK", "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" , "Price": "16.40", "Genre": "Rock" }, { "name": "Depeche Mode", "Album": "A Question Of Time", "Label": "Mute", "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" , "Price": "4.68" , "Genre": "Rock" }, { "name": "Placebo", "Album": "Street Halo/Kindred", "Label": "Hyperdub Japan", "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" , "Price": "14.06", "Genre": "Future Garage" } ] Typeahead脚本
<script> var products = new Bloodhound({ datumTokenizer: function(d) {return d.name; }, queryTokenizer: Bloodhound.tokenizers.whitespace, prefetch: 'http://localhost/dh/js/products.json' }); products.initialize(); $('.test1').typeahead({ highlight: true }, { name: 'products', displayKey: 'num', source: states.ttAdapter() }); </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/bootstrap.js"></script> <script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script> <div class="search_content"> <input class="test1" type="text" placeholder="product"> </div>
我只是花了一些时间试图让自己工作，我完全同意它不直观。 特别是在关于“血猎犬”的这个types的页面上有一件事情，因为我可能不工作。 例如下面一行：
datumTokenizer：Bloodhound.tokenizers.obj.whitespace（'value'） – 总会产生一个错误，因为obj不存在。
对于datumTokenizer使用以下forms（其中“DisplayText”是包含将显示的文本的对象中的属性的名称）：
function (d) { return Bloodhound.tokenizers.whitespace(d.DisplayText); }
并记住当你创build一个键入的时候，将displayKey设置为你想要显示文本数据的集合中属性的名字。 对我来说，这总是和我想要标记的属性一样 – 所以我的前面的语句如下所示：
$('#my-typeahead').typeahead({ hint: true, highlight: true, minLength: 3 }, { name: 'someName', displayKey: 'DisplayText', source: myBloodhound.ttAdapter() }
改成：
来源：products.ttAdapter（）
