Question

Twitter Typeahead的POST

我已经工作了两天，试图理解并清楚地了解如何使用/管理typeahead.js 0.10以便使用本地，远程和获取的数据。

老实说，对我来说，血腥引擎并不清楚，有关如何操作/访问json对象和数组的详细信息仍然是一个问号。

我可以让本地示例工作，但是每当我尝试使用预取或远程选项时，除了几个刻度之外，我都无法工作。

我在这篇文章中的目标不仅仅是找到我的问题的答案，而是找到一个完全了解它的人，并且能够以一种非常简单的方式逐步解释（使用示例/ jsfiddles - 包括json示例，以了解实际解析的内容）这个东西是如何工作的。

我认为很多人都期待理解它，这将是一个伟大的贡献（正如我们所知道的其他详细帖子）。

我认为这是一项艰苦的工作。

提前感谢您的贡献者。

遵循以下建议。我的简单例子。

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>

Answer 1

我只是花了几天时间试图让自己发挥作用，我完全同意它不直观。特别是在类型页面上有一件关于Bloodhound的事情尝试，因为我可能只是没有工作。例如，以下行：

datumTokenizer：Bloodhound.tokenizers.obj.whitespace（'value'） - 总是会产生错误，因为obj不存在。

对于datumTokenizer，请使用以下格式（其中“DisplayText”是对象中包含将要显示的文本的属性的名称）：

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

并记住在创建预先输入时将displayKey设置为集合中包含要显示的文本数据的属性的名称。对我而言，这总是与我想要标记的属性相同 - 所以我的先行语句如下所示：

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }

Answer 2

更改为：

source：products.ttAdapter（）

Answer 3

接受的答案虽然在当时是正确的，但并没有多大用处，因为预先输出0.10很长过时。当前版本为1.2.1（截至2018年）

回答原来的问题，
这是一个 reference tutorial ，它逐步解释了使用Typehhead和Bloodhound（本地，预取，远程及其组合）与基于仍然维护的分叉的JS小提琴 - Typeahead v1.2.1

如何使用Typeahead.js 0.10 step-by-step / remote / prefetch / local

3 个答案:

接受的答案虽然在当时是正确的，但并没有多大用处，因为预先输出0.10很长过时。当前版本为1.2.1（截至2018年）