如何将TypeAhead.js与Twitter API集成

Question

我正在尝试使用typeahead.js通过GET朋友/列表在文本输入上提供来自Twitter关注用户列表的自动完成功能。

这是我的代码：

$('input.twitter_friend').typeahead({
    name: 'countries',
    prefetch: 'https://api.twitter.com/1.1/friends/list.json',
    limit: 10,
    template: [
        '<img src="{{profile_image_url}} class="autocomplete_img>',
        '<p class="autocomplete_name">{{name}}</p>',
        '<p class="autocomplete_screen_name">@{{screen_name}}</p>'
    ].join(''),
    engine: Hogan
});

此表单在用户通过 OAuth 登录后显示。

而且，好吧，它不起作用，也没有说任何错误。 我对推特API了解不多，所以，任何人都可以帮忙吗？

Answer 1

经过一百万次测试，我发现我不能直接在 Twitter API 中使用prefetch。 首先，我必须研究 JSON。

当我使用PHP时，我使用了Twitteroauth（https://github.com/abraham/twitteroauth），所以我建立了连接。 可以从会话或数据库获取用户令牌和令牌机密。

$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $oauth_token, $oauth_token_secret);

在"提前键入"中.js '：

$(document).ready(function(){
    $('#twitter_friend').typeahead({
        name: 'friends',
        local: [<?php 
            $cursor = -1;
            while ($cursor != 0) {
                $friends = $connection->get('https://api.twitter.com/1.1/friends/list.json', array('screen_name' => $screenname, 'cursor' => $cursor, 'count' => '200'));
                foreach ($friends->users as $friend) {
                    echo "{'profile_image_url': '".$friend->profile_image_url_https."', ";
                    echo "'name': '".$friend->name."', ";
                    echo "'value': '".$friend->screen_name."', ";
                    echo "'tokens': ['".$friend->screen_name."', '".$friend->name."']}, ";
                }
                $cursor = $friends->next_cursor;
            }
        ?> { }],
        template: [
            '<img src="{{profile_image_url}}" class="autocomplete_img">',
            '<p class="autocomplete_name">{{name}}</p>',
            '<p class="autocomplete_screen_name">@{{value}}</p>'
        ].join(''),
        engine: Hogan
    });
});

只是解释我所做的：

while ($cursor != 0) {
    $friends = $connection->get('https://api.twitter.com/1.1/friends/list.json', array(
        'screen_name' => $screenname, // you must declare this variable somewhere, i just got it from my site database
        'cursor' => $cursor, 
        'count' => '200' // maximum number of values you can do per request
    ));

Twitter API 的GET friends/list每个请求最多可以获得 200 条记录。 所以我不得不循环直到我得到所有这些，也就是说，cursor等于零（详细信息在这里：https://dev.twitter.com/docs/misc/cursoring）

当使用 cursor = -1 发出请求时，它从列表的开头获取。 在 JSON 中，将给出一个新的游标。 当列表结束时，cursor返回 0。

在循环中，您可以获取有关用户的任何信息。 在这里，我得到用户名（screen_name），name和个人资料图像（profile_img_url）。

这就是使Typeahead.js发挥作用的诀窍：您必须创建一个包含用于value和tokens的键参数的JSON。 value是您希望用户在输入中输入的值。 tokens是用户可以键入以获取提示的单词。

当我使用Twitteroauth时，它给出了一个数组，所以我必须编写JSON。 必须有其他方法可以通过PHP来实现它（如json_encode），所以对于高级程序员来说，它一定看起来有点脏。

foreach ($friends->users as $friend) {
    echo "{'profile_image_url': '".$friend->profile_image_url_https."', ";
    echo "'name': '".$friend->name."', ";
    echo "'value': '".$friend->screen_name."', ";
    echo "'tokens': ['".$friend->screen_name."', '".$friend->name."']}, ";
}

所以，如果我关注这个用户，我（我的Twitter屏幕名称是@fksr86）会得到这样打印的记录：

{
    'profile_image_url': 'https://pbs.twimg.com/profile_images/378800000757205383/cd37c8011226aa6014c29737ac03b42f.png',
    'value' : 'fksr86',
    'tokens': 'fksr86', 'Fuks'
},

在 JSON Twitter API 提供的字段中，有一个名为 next_cursor 的字段，我请求查看它是否为 0。

$cursor = $friends->next_cursor;

它将继续循环，直到达到 0。

如果用户由于 API 请求限制而关注太多人，可能会有一些错误。

希望它能帮助那些面临与我相同问题的人。