How do I reuse Facebook's Movie Autocomplete in my own Facebook App?

Question

On Facebook, when you go to, Edit My Profile > Arts and Entertainment, there is a "Movies" autocomplete widget that suggests movies as you type them in.

So if you type in "Jones", it will start to suggest:

Indiana Jones
Bridget Jones' Diary
Indiana Jones and the Kingdom of the Crystal Skull

Can I reuse this widget (or its data) in my own Facebook app?

I would like to give my users the ability to create lists of movies, and I think this feature would be a lot better than having them manually type out the full names of each movie on their list.

I found one potentially relevant answer on stackoverflow ( How to consume Facebook's "autocomplete anything" suggest-style dropdown ) but the answer is 2 years old, and seems to reference an FBML tag called "typeahead" which is no longer in use.

Most searches for "Facebook autocomplete" talk about replicating the autocomplete feature for Facebook's messages, such as what is described here. But obviously this isn't what I'm looking for, so I'm not finding any help.

If I can't reuse the exact widget that Facebook uses for this feature, is there a way I can feed the data that it draws upon into jQuery UI's autocomplete?

So far I can't find anything like this in Facebook's API, but I'd be surprised if there wasn't as I think a lot of people could use Facebook's autocomplete data in their own Facebook apps.

score 3 · Accepted Answer · answered May 10 '11 at 22:19

Here is the closest thing to a solution I was able to write, using jQuery UI's autocomplete widget. This solution doesn't act as a true autocomplete, because although typing in "Indiana" will suggest "Indiana Jones", typing in "Indiana Jo" will not suggest anything. Perhaps someone else has a better solution?

    $( "#autocomplete" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "https://graph.facebook.com/search",
            dataType: "jsonp",
            data: {
                type: "page",
                q: request.term
            },
            success: function( data ) {
                response( $.map( data.data, function( item ) {
                    if (item.category=="Movie") {
                        return {
                            value: item.name
                        }
                    }
                }));
            }
        });
    },
    minLength: 2
    });

How do I reuse Facebook's Movie Autocomplete in my own Facebook App?

1 Answers1