使用typeahead.js从json数据中检索多个值

h4kl0rd

我无法将远程json数据访问到typeahead.js中我尝试使用prefetch示例来检索笔记并能够使用typeahead.js进行搜索,但是只能获取仅包含值的简单json笔记。

我使用的json数据文件是data / notes_simple.json

["Atomic Energy", "Introduction to Biology", ...]

搜索结果如下所示:(仅显示名称)

Electromagnetism
Introduction to Biology

我希望能够使用data / notes.json,其中包含

[{
    "name": "Electromagnetism",
    "subject": "Physics",
    "form": "4"
}, {
    "name": "Introduction to Biology",
    "subject": "Biology",
    "form": "1"
...

我要显示的搜索结果如下:(显示名称,主题和形式/类别)

Electromagnetism
Physics - Form 4

Introduction to Biology
Biology - Form 1

我怎样才能得到上面的东西?

我的js / prefetch.js如下所示:

$(function() {
    var notes = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: {
            url: 'data/notes_simple.json',
            filter: function(list) {
                return $.map(list, function(country) {
                    return {
                        name: country
                    };
                });
            }
        }
    });

    notes.initialize();

    $('#prefetch .typeahead').typeahead(null, {
        name: 'notes',
        displayKey: 'name',
        source: notes.ttAdapter()
    });

});

您可以在这里找到我的托管项目:http : //goo.gl/7kPVk2

任何帮助表示赞赏。

本·史密斯

您可以在此处查看如何执行类似操作的示例:

http://jsfiddle.net/Fresh/u4fq85bj/

您需要将远程调用更改为notes.json,并适当地修改过滤器,例如

remote: {
    url: '/notes.json',
    filter: function (notes) {
        return $.map(notes, function (note) {
            return {
                name: note.name,
                subject: note.subject,
                form: note.form
            };
        });
    }
}

要以所需的格式显示结果,可以使用带有标记的Handlebars模板引擎,如下所示:

templates: {
 suggestion: 
  Handlebars.compile("<p>{{name}}</p><p>{{subject}} - Form {{form}}</i></p>")
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用typeahead.js从json数据中检索多个值

来自分类Dev

使用JSON数据输入的bootstrap typeahead标签

来自分类Dev

在Json中使用typeahead.js

来自分类Dev

使用MySQL DB的Typeahead.js Basic

来自分类Dev

如何使用jQuery从多个Json文件中检索数据

来自分类Dev

为什么在Node.JS上使用typeahead的LiveSearch无法检索数据

来自分类Dev

Angular.js-使用Typeahead必须显示2个值

来自分类Dev

使用Twitter Typeahead.js访问元素的数据属性

来自分类Dev

如何使用最新的typeahead.js库呈现JSON响应

来自分类Dev

如何在Bootstrap 3中使用typeahead.js?

来自分类Dev

使用typeahead.js在同一文本元素中选择多个值

来自分类Dev

Typeahead.js-使用一个远程源的多个数据集

来自分类Dev

使用php从mysql数据库的多个表中检索多个值的效率如何

来自分类Dev

使用typeahead从json创建动态li元素-循环错误

来自分类Dev

使用typeahead从json创建动态li元素-循环错误

来自分类Dev

使用typeahead.js和jquery ajax调用

来自分类Dev

使用typeahead.js创建可点击的动态链接

来自分类Dev

结合使用Typeahead.js和ASP.NET WebAPI

来自分类Dev

让typeahead.js使用动态内容,Bottle和Hogan

来自分类Dev

使用enter键的typeahead.js搜索框导航

来自分类Dev

结合使用typeahead.js和jquery ajax调用

来自分类Dev

仅使用typeahead.js强制有效输入

来自分类Dev

在xpages中将Typeahead.js与Bootstrap 3结合使用

来自分类Dev

使用Typeahead.js搜索城市不会返回任何内容

来自分类Dev

使用Twitter的typeahead.js-调用我的WebAPI,如何在我的typeahead输入文本框中填充下拉列表?

来自分类Dev

通过使用单元格值中的文件路径从多个Excel文件中检索数据

来自分类Dev

使用多个HashMap检索Java中的值

来自分类Dev

在 Typeahead.js 的远程属性(参数)中使用 select-box 值

来自分类Dev

使用jq从json文件中检索值

Related 相关文章

  1. 1

    使用typeahead.js从json数据中检索多个值

  2. 2

    使用JSON数据输入的bootstrap typeahead标签

  3. 3

    在Json中使用typeahead.js

  4. 4

    使用MySQL DB的Typeahead.js Basic

  5. 5

    如何使用jQuery从多个Json文件中检索数据

  6. 6

    为什么在Node.JS上使用typeahead的LiveSearch无法检索数据

  7. 7

    Angular.js-使用Typeahead必须显示2个值

  8. 8

    使用Twitter Typeahead.js访问元素的数据属性

  9. 9

    如何使用最新的typeahead.js库呈现JSON响应

  10. 10

    如何在Bootstrap 3中使用typeahead.js?

  11. 11

    使用typeahead.js在同一文本元素中选择多个值

  12. 12

    Typeahead.js-使用一个远程源的多个数据集

  13. 13

    使用php从mysql数据库的多个表中检索多个值的效率如何

  14. 14

    使用typeahead从json创建动态li元素-循环错误

  15. 15

    使用typeahead从json创建动态li元素-循环错误

  16. 16

    使用typeahead.js和jquery ajax调用

  17. 17

    使用typeahead.js创建可点击的动态链接

  18. 18

    结合使用Typeahead.js和ASP.NET WebAPI

  19. 19

    让typeahead.js使用动态内容,Bottle和Hogan

  20. 20

    使用enter键的typeahead.js搜索框导航

  21. 21

    结合使用typeahead.js和jquery ajax调用

  22. 22

    仅使用typeahead.js强制有效输入

  23. 23

    在xpages中将Typeahead.js与Bootstrap 3结合使用

  24. 24

    使用Typeahead.js搜索城市不会返回任何内容

  25. 25

    使用Twitter的typeahead.js-调用我的WebAPI,如何在我的typeahead输入文本框中填充下拉列表?

  26. 26

    通过使用单元格值中的文件路径从多个Excel文件中检索数据

  27. 27

    使用多个HashMap检索Java中的值

  28. 28

    在 Typeahead.js 的远程属性(参数)中使用 select-box 值

  29. 29

    使用jq从json文件中检索值

热门标签

归档