如何在我自己的Facebook应用程序中重用Facebook的电影自动完成功能？

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.

Answer 1

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