admin 管理员组

文章数量: 1086019

I'm using the official examples from Twitter. The main problem, I probably don't know how to use the Hogan monster. The JS side:

$("#search_name").typeahead({
    name: 'name',
    remote: {
        url: '/entities/search_autoplete.json?query=%QUERY',
        template: '<p><strong>{{id}}</strong> – {{name}}</p>',
        engine: Hogan
      }
});

The server is returning the data in JSON, the structure is:

[{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}]

I'm using the official examples from Twitter. The main problem, I probably don't know how to use the Hogan monster. The JS side:

$("#search_name").typeahead({
    name: 'name',
    remote: {
        url: '/entities/search_autoplete.json?query=%QUERY',
        template: '<p><strong>{{id}}</strong> – {{name}}</p>',
        engine: Hogan
      }
});

The server is returning the data in JSON, the structure is:

[{\"id\":1234,\"name\":\"Blah blah...\",\"tokens\":[\"blah...\",\"blah\"]}]
  • javascript
  • twitter-bootstrap
  • typeahead
Share Improve this question edited May 2, 2013 at 22:05 Kyle Trauberman 25.7k13 gold badges87 silver badges124 bronze badges asked May 1, 2013 at 15:50 valkvalk 9,90412 gold badges63 silver badges82 bronze badges 2
  • 1 That doesn't look like JSON to me. – Lee Meador Commented May 1, 2013 at 15:52
  • Sorry, it's a Ruby code, it's converted with to_json, and the output is almost identical, i.e. all :asdf are converted to "asdf" etc. It's just more readable, but anyway, converted it to JSON. – valk Commented May 1, 2013 at 17:23
Add a ment  | 

1 Answer 1

Reset to default 7

Just took this code from one of our projects, should help you understand the necessary markup of converting external JSON arrays and outputting in a custom autoplete prompt:

$('input').typeahead({
    header: 'Your Events',
    template: [
    '<img class="ta-thumb" src="https://graph.facebook./{{id}}/picture?type=square" />',
    '<p class="ta-h1">{{name}}</p>',
    '<p class="ta-p">{{start_time}}</p>'
    ].join(''),
    limit: 3,
    remote: {
        url: 'https://graph.facebook./me/events?access_token=' + access_token,
        filter: function(parsedResponse) {
            var dataset = [];
            for(i = 0; i < parsedResponse.data.length; i++) {
                dataset.push({
                    name: parsedResponse.data[i].name,
                    start_time: parsedResponse.data[i].start_time,
                    id: parsedResponse.data[i].id,
                    value: parsedResponse.data[i].name,
                    tokens: [parsedResponse.data[i].id, parsedResponse.data[i].name]
                });
            }
            return dataset;
        },
    },
    engine: Hogan
});

You need to download the Hogan.js template piler and include it in your markup (e.g. using it as an external script or via a module loader like Require.js). This will then set the Hogan variable.

I'd also remend looking at that Graph API call to understand the array conversion better.

Hopefully this helps :)

本文标签： javascriptTwitter39s Bootstrap typeahead setupStack Overflow

版权声明：本文标题：javascript - Twitter&#39;s Bootstrap typeahead setup - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744068565a2528067.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。