One of the things we’ve got a bit over excited about this week is the new auto-suggest present lister we’ve rolled into the Wishli.st FB app. It means that if we already know about a gift, you don’t need to do all the leg work to add it, just start typing it’s name, pick it off the list, and away you go.

The magic is all done by the FBML tag tag, which is sadly not brilliantly documented. However, after lots of Googling and experimenting, we got it working, and here’s how…

There are three bits

1. The backend to generate the data for auto populating with
2. The FBML selector (this is what the user will see)
3. The backend to handle the request once somebody selects something

The backend…

Needs to produce an array of id’s and names.  The id will be set as the value that the form submits, the name will be the bit people see.  We’re pulling data about products, so we did a quick database call to get unique names (there are lots of duplicates) and then format this up as a nice flat array:

SELECT distinct (name), id FROM [tablename] group by name order by name

We threw this to an array called $names.

The FBML selector…

Is actually really simple, despite what the documents might make you think. Note the <fb:fbml tag which you have to include (and specify this version) or it doesn’t seem to work.

I take the $names array and iterate through adding an option for each product like so…

<form action=”path/to/handler” method=”post”>

<fb:fbml version=”1.1″>

<fb:typeahead-input name=”name” autocomplete=”off” size=”50″>

<?php foreach ($names as $item){?>

<fb:typeahead-option value=”<?php echo $item['id'];?>”><?php echo $item['name'];?></fb:typeahead-option>

<?php } ?>

</fb:typeahead-input>

</fb:fbml>

And FB will take care of turning the FBML into HTML and JavaScripting it up nicely.

The backend handler…

Should be really simple, but there are a few edge cases, namely what you do when somebody managed to fill in your lovely autosuggestor with something new (who would do such a thing?).

Because we’re passing a number (the id) as the value, if what it is passed is not a number, we know that it wasn’t an option, and then we can do something with the input they did enter.  Here’s our actual code (minus a few secrets):

function addbymagicsuggest()
{
$id = $this->input->post(‘name_val’);
$name = $this->input->post(‘name’);
if(is_numeric($id)){
// they submitted something we know about
echo “thanks for submitted item”.$id;
}else{
//handle the new item
echo “you submitted”.$name;
}
}

And amazingly thats it – you’d never believe it was that simple from the docs, but it really is.  Here’s a picture in action to prove it.