如何使用 Typeahead.js 0.10 一步一步/远程/预取/本地答案

【问题标题】：How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local如何使用 Typeahead.js 0.10 一步一步/远程/预取/本地
【发布时间】：2014-02-11 18:37:47
【问题描述】：

为 Twitter Typeahead 发布帖子

我已经有 2 天了，试图了解并清楚地了解如何使用 /manage typeahead.js 0.10 来使用本地、远程和获取的数据。

老实说，我并不清楚 Bloodhound 引擎，关于如何操作/访问 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>

【问题讨论】：

我不喜欢预先输入，所以尝试使用brianreavis.github.io/selectize.js 我认为更简单和丰富的库
为什么不显示您尝试过的内容？
首先，将显示键从 num 更改为结构中的字段，例如名称。第二。将“预取”更改为“远程”。不知道为什么第二个更改对我有用，但是当我像你一样尝试它时预取被破坏了。
我必须同意你的观点，这应该不难开始工作，但在大多数情况下，除了最简单的例子，它只是工作。文档非常混乱，可能假设太多，没有解释需要解释的区域等。我想我会检查 selectize.js。

标签： javascript json twitter-typeahead

【解决方案1】：

我只是花了几天时间试图让它自己工作，我完全同意它不直观。特别是在关于 Bloodhound 的预先输入页面上有一件事，因为我可能只是没有工作。例如下面这行：

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') -- 总是会产生错误，因为 obj 不存在。

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

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

请记住，当您创建预输入时，请将 displayKey 设置为集合中包含您要显示的文本数据的属性的名称。对我来说，这始终与我想要标记的属性相同 - 所以我的 typeahead 语句如下所示：

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

【讨论】：

【解决方案2】：

改为：

来源：products.ttAdapter()

【讨论】：

【解决方案3】：

接受的答案虽然在当时是正确的，但鉴于 typeahead 0.10 已经很长过时，它并没有多大用处。当前版本为 1.2.1（截至 2018 年）

所以回答原来的问题，
这是一个 reference tutorial 逐步解释了如何使用 Typeahead 和 Bloodhound（本地、预取、远程和这些的组合）和基于仍然 维护的 fork - Typeahead v1 的 JS 小提琴.2.1

【讨论】：