大佬教程收集整理的这篇文章主要介绍了jquery – Typeahead v0.10.2&Bloodhound – 使用嵌套的JSON对象,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
根据@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在午夜的钟声
我正在使用每个库的最新版本:
@L_616_11@
示例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() });
任何帮助或方向将不胜感激.我只需要知道如何获取与sourceahead / Bloodhound一起工作的JSON数据.
谢谢!
filter: function (responsE) { return $.map(response.songs,function (song) { return { title: song.title,artistName: song.artist_name }; }); }
并将您的数据转换器更改为:
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对象全部内容,希望文章能够帮你解决jquery – Typeahead v0.10.2&Bloodhound – 使用嵌套的JSON对象所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。