如何将 typeahead.js 与 twitter api 集成答案

【问题标题】：how to integrate typeahead.js with twitter api如何将 typeahead.js 与 twitter api 集成
【发布时间】：2013-11-30 03:44:50
【问题描述】：

我正在尝试使用 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 登录后出现。

而且，它不工作并且没有说任何错误。我对twitter api不太了解，所以，有人可以帮忙吗？

【问题讨论】：

(1) 请告诉我们错误是什么？一般来说，如果您需要帮助，请提供尽可能多的相关信息。告诉我们“有错误”并不是很有用。 (2) 您在autocomplete_img 之后缺少结束语。 (3) 您的数据源的name 似乎不应该是countries，可能是其中一个示例的复制粘贴？
还有一件事：您可能需要实现filter 来将list.json 的结果转换为Typeahead 可以“消化”的对象数组。可能至少有value，也可能有profile_image_url、name 和screen_name。

标签： jquery twitter typeahead typeahead.js

【解决方案1】：

经过一百万次测试，我发现我无法将prefetch 直接与 Twitter API 一起使用。首先，我必须处理 JSON。

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

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

在 Typeahead.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."']}, ";
}

所以，如果我关注这个用户，我（我的推特网名是@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 请求限制而关注的人过多，可能会出现一些错误。

希望它能帮助遇到和我一样问题的人。

【讨论】：