jquery – Typeahead v0.10.2&Bloodhound – 使用嵌套的JSON对象

UPDATE

根据@BenSmith(https://stackoverflow.com/users/203371/BenSmith)的正确答案,我找到了我的问题,发现我没有正确导航我的JSON层次结构.这是工作代码：

// instantiate the bloodhound suggestion engine
    var engine = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.title);
        },queryTokenizer: Bloodhound.tokenizers.whitespace,prefetch: {
            url: "SampleData.json",filter: function (data) {
                //console.log("data",data.response.songs)
                return $.map(data.response.songs,function (song) {
                    return {
                        title: song.title,artistName: song.artist_name
                    };
                });
            }
        }
    });

    // initialize the bloodhound suggestion engine
    engine.initialize();

    // instantiate the typeahead UI
    $('#prefetch .typeahead').typeahead(
      {
          hint: true,highlight: true,minLength: 1
      },{
          name: 'engine',displayKey: 'title',source: engine.ttAdapter(),templates: {
              empty: [
              '<div class="empty-message">','unable to find any results that match the current query','</div>'
              ].join('\n'),suggestion: Handlebars.compile('<p><strong>{{title}}</strong> by {{artistName}}</p>')
          }
      });

谢谢@BenSmith的帮助！

原始问题

我是新来的Typeahead和Bloodhound工作.文档不是很有帮助.我有一组JSON对象,我从我正在使用的API中获得回复.我试图找出如何浏览我的JSON对象,以便Bloodhound能够理解它们.

这里的目标是用户将开始键入歌曲名称.然后,自动填充将显示歌曲名称列表和由其执行的艺术家.

例如：Mastodon在午夜的钟声

我正在使用每个库的最新版本：
https://twitter.github.io/typeahead.js/

示例JSON(SampleData.json)：

{"response": {"status": {"version": "4.2","code": 0,"message": "Success"},"songs": [{"title": "Chimes At Midnight","artist_name": "Mastodon","artist_foreign_ids": [{"catalog": "7digital-AU","foreign_id": "7digital-AU:artist:29785"},{"catalog": "7digital-UK","foreign_id": "7digital-UK:artist:29785"}],"tracks": [],"artist_id": "ARMQHX71187B9890D3","id": "SOKSFNN1463B7E4B1E"},{"title": "Down Under","artist_name": "Men at Work","foreign_id": "7digital-AU:artist:50611"}],"artist_id": "AR4MVC71187B9AEAB3","id": "SORNNEB133A920BF86"}]}}

使用此站点 http://json.parser.online.fr/可以轻松格式化JSON.

我将收回的JSON将始终是相同的格式,但包含不同的数据.在这个例子中,“轨道”为空.其他结果将有数据.我也需要能够访问该数据.

我正在使用最新版本的JQuery.这是我在html页面中包含的内容：

<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/typeahead.bundle.min.js"></script>

这是HTML：

<div id="prefetch">
    <input class="typeahead" type="text" placeholder="Songs...">
</div>

这是脚本：

// instantiate the bloodhound suggestion engine
    var engine = new Bloodhound({
        datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.tokens.join(' ')); },filter: function (response) {
                return response.engine;
            }
        }
    });

    // initialize the bloodhound suggestion engine
    engine.initialize();

    // instantiate the typeahead UI
    $('#prefetch .typeahead').typeahead(
      {
          hint: true,{
          name: 'songs',displayKey: function (engine) {
              return engine.songs.artist_name;
          },source: engine.ttAdapter()
      });

当我尝试运行这个代码我得到以下错误：

未捕获TypeError：无法读取未定义的属性“标记”

任何帮助或方向将不胜感激.我只需要知道如何获取与Sourceahead / Bloodhound一起工作的JSON数据.

谢谢！

解决方法

您需要编写过滤器函数,以便创建一个用作基准的JavaScript对象数组.以下应该工作(我没有测试过)：

filter: function (response) {
            return $.map(response.songs,function (song) {
                return {
                    title: song.title,artistName: song.artist_name
                };
            });
        }

(可以发现滤镜功能的一个例子here)

并将您的数据转换器更改为：

datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.title);
    }

还将你的显示键改为：

displayKey: 'title'

因为这是Typeahead将用于搜索的关键.

至于在建议列表中显示歌曲名称和艺术家,我建议您使用模板(例如Handlebars)显示结果.请参阅Typeahead’s examples page中的“自定义模板”示例.您的建议标记将类似于以下内容：

suggestion: Handlebars.compile('<p><strong>{{title}}</strong> by {{artistName}}</p>')

jquery – Typeahead v0.10.2&Bloodhound – 使用嵌套的JSON对象

解决方法

相关文章