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

Question

UPDATE

基于@BenSmith(/sf/users/14236001/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", "artist_foreign_ids": [{"catalog": "7digital-AU", "foreign_id": "7digital-AU:artist:50611"}], "tracks": [], "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(' ')); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: "SampleData.json",
            filter: function (response) {
                return response.engine;
            }
        }
    });

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

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

当我尝试运行此代码时,我收到以下错误:

未捕获的TypeError:无法读取undefined的属性'tokens'

任何帮助或方向将非常感谢.我只需要知道如何获取我正在使用Typeahead/Bloodhound的JSON数据.

谢谢!

Answer 1

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

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

(可在此处找到过滤器功能的示例)

并将您的datumtokenizer更改为:

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

还将displaykey更改为:

displayKey: 'title'

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

至于在建议列表中显示歌曲名称和艺术家,我建议你使用模板(例如Handlebars)来显示结果.请参阅Typeahead的示例页面中的"自定义模板"示例.您的建议标记将类似于以下内容:

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

Answer 2

我的回答并不新鲜,只是对twitter类型的v0.11的更新.与往常一样,将您的upvotes(如果有)重定向到原始答案.

对仍在使用Twitter-Typeahead的每个人的友好提醒是,由于不再维护,因此远离此存储库.而是将自己重定向到corejavascript/typeahead.js,它是原始存储库的一个分支,同一作者(@JakeHarding)维护此存储库.

从v0.10到v0.11,一些事情发生了变化,答案也必须如此.这是我对这个新版本的新代码.

HTML

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

JS

    var tags = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://www.yourwebsite.com/js/data.json',
            cache: false,
            transform: function(response) {
                return $.map(response, function (tag) {
                    return {
                        name: tag.tagName,
                        id: tag.tagId
                    }
                });
            }
        }
    });

    $('#prefetch .typeahead').typeahead({
        minLength: 3,
        highlight: true
    }, {
        name: 'tags-dataset',
        source: tags,
        display: 'name'
    });

发生了什么变化:

1. 没有filter选项prefetch.相反,你必须使用transform.
2. displayKeytypeahead()功能下已改为简单display.
3. cacheunder transform选项设置为false,以便每次都加载数据源.这适用于测试,但在生产服务器中,如果需要缓存数据,则必须禁用此选项.

作为对使用cache设置为true的不同数据源尝试此示例的人员的补充说明.您必须始终window.localStorage.clear();在控制台中运行 方法以清除已存在的本地存储,以便可以检索新数据.如果不这样做将导致使用旧数据,您可能会想到为什么您的代码无法正常工作.

这是一个有效的JSFIDDLE示例,可以帮助您入门.需要注意的几点:

1. 我不知道是否有针对typeahead的CDN,所以我只是将整个typeahead javascript代码粘贴在那里.在页面底部,您可以查看我的功能.
2. 数据源指向链接,该链接是我的保管箱帐户中托管的文件.如果我删除此文件,此示例根本不起作用.因此,您需要提供自己的来源.以下是该文件的内容 - [{"tagId":9,"tagName":"Action"},{"tagId":10,"tagName":"Adventure"},{"tagId":6,"tagName":"Books"},{"tagId":11,"tagName":"Fantasy"},{"tagId":2,"tagName":"Games"},{"tagId":1,"tagName":"Movies"},{"tagId":3,"tagName":"Music"},{"tagId":8,"tagName":"News"},{"tagId":4,"tagName":"Office"},{"tagId":5,"tagName":"Security"},{"tagId":7,"tagName":"TV-Shows"}]