how to integrate typeahead.js with twitter api

Question

i am trying to use typeahead.js to offer autocomplete from a twitter following users list on a text input, through GET friends/list.

here is my code:

$('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
});

this form appears after the person is logged on through OAuth.

and, well, it is not working and not saying any error. i don't understand much from twitter api, so, anyone could please help?

Answer 1

after a million tests, i discovered that i can't use prefetch directly with Twitter API. firstly, i had to work on the JSON.

as i'm working with PHP, i used Twitteroauth (https://github.com/abraham/twitteroauth), so i make the connection. you can get the user token and token secret from session or database.

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

in the 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
    });
});

just explaining what i've done:

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's GET friends/list can get up to 200 record per request. so i had to loop till i get all of them, that is, cursor equals zero (details here: https://dev.twitter.com/docs/misc/cursoring)

when a request is made using cursor = -1, it gets from the start of the list. in the JSON, a new cursor is given. when the list is over, cursor returns 0.

in the loop, you can get any info you want about the user. here i get the user name (screen_name), name and profile image (profile_img_url).

this is where the trick to make Typeahead.js work: you must create a JSON containing key pars for value and tokens. value is the value you want the user enter in the input. tokens are the words the user can type to get a tip.

as i'm using Twitteroauth, it gives an array, so i have to write the JSON. there must be other ways to make it through PHP (like json_encode), so it must seem a little dirty to advanced programmers.

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

so, if i was following this user, i (my twitter screen name is @fksr86) would get a record printed like this:

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

in the JSON Twitter API offers, there's a field called next_cursor, that i request to see if it's 0 or not.

$cursor = $friends->next_cursor;

and it will keep looping till it gets to 0.

maybe there'd be some errors if a user is following too many people due to API request limits.

hope it helps somebody that faces the same problem as i did.