• 为 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>

最佳答案

我只是花了几天时间试图让它自己工作，我完全同意它不直观。特别是在关于 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()
    }

https://stackoverflow.com/questions/21710289/