Facebook Cookbook

Predicting the Future with Type-Ahead Controls

Problem

I love the type-ahead control that Facebook provides in the fb:friend-selector (see You Can Pick Your Friends), but I want to use it for things other than friends.

Solution

Use the fb:typeahead-input tag, which is currently in beta. The simplest form is:

<fb:fbml version="1.1">
<form name="some_form" action="http://apps.facebook.com/myapp/handle.php"
 method="post">
<fb:typeahead-input name="color">
    <fb:typeahead-option value="red">Red</fb:typeahead-option>
    <fb:typeahead-option value="yellow">Yellow</fb:typeahead-option>
    <fb:typeahead-option value="green">Green</fb:typeahead-option>
</fb:typeahead-input>
</form>
</fb:fbml>

This tag is supported only in FBML v1.1, so you’ll need to make sure to wrap it in the fb:fbml tags or you’ll get an error about it not being supported in this version.

Discussion

In the example just shown, the handle.php page will receive the value of the form as the color parameter. If you don’t provide a name for your field, you won’t be able to access the value later, so it’s probably a good idea.

You can use FBML inside of the fb:typeahead-options tag if you’d like to include dynamic information, including names of users:

<fb:typeahead-option value="12345"><fb:name
 uid="12345" linked="false" useyou="false" /></fb:typeahead-option>

The type-ahead field is particularly useful when combined with an API call to provide users a choice from a long list of Facebook-related content. You could, for example, use the API to ...