Auto suggest feature in facebook application

facebookSometimes you may need auto suggest feature for your application. And its very easy to implement in facebook application because facebook provides a FBML code for this purpose.

For example, in this post I’ll show how to auto suggest state to your users by your facebook application.

Look at the php function that creates a states array and return the array.

function getStates(){
        $locations      =   array(
        'Alaska / AK ',
        'Alabama / AL ',
        'Arkansas / AR ',
        'Arizona / AZ ',
        'California / CA ',
        'Colorado / CO ',
        'Connecticut / CT ',
        'District Of Columbia / DC ',
        'Delaware / DE ',
        'Florida / FL ',
        'Georgia / GA ',
        'Hawaii / HI ',
        'Iowa / IA ',
        'Idaho / ID ',
        'Illinois / IL ',
        'Indiana / IN ',
        'Kansas / KS ',
        'Kentucky / KY ',
        'Louisiana / LA ',
        'Massachusetts / MA ',
        'Maryland / MD ',
        'Maine / ME ',
        'Michigan / MI ',
        'Minnesota / MN ',
        'Missouri / MO ',
        'Mississippi / MS ',
        'Montana / MT ',
        'North Carolina / NC ',
        'North Dakota / ND ',
        'Nebraska / NE ',
        'New Hampshire / NH ',
        'New Jersey / NJ ',
        'New Mexico / NM ',
        'Nevada / NV ',
        'New York / NY ',
        'Ohio / OH ',
        'Oklahoma / OK ',
        'Oregon / OR ',
        'Pennsylvania / PA ',
        'Rhode Island / RI ',
        'South Carolina / SC ',
        'South Dakota / SD ',
        'Tennessee / TN ',
        'Texas / TX ',
        'Utah / UT ',
        'Virginia / VA ',
        'Vermont / VT ',
        'Washington / WA ',
        'Wisconsin / WI ',
        'West Virginia / WV ',
        'Wyoming / WY ',
        'American Samoa / AS ',
        'Federated States Of Micronesia / FM ',
        'Guam / GU ',
        'Marshall Islands / MH ',
        'Northern Mariana Islands / MP ',
        'Palau / PW ',
        'Puerto Rico / PR ',
        'Virgin Islands / VI ',
        );
        return $locations;
    }

Now look at the following figure:

facebook-auto-suggest

We will implement this by the following codes

<?php
     $states = getStates();
?>
<form name="ff" method="POST" action="http://apps.facebook.com/yourapp/page">
    State
    <fb:fbml version="1.1">
        <fb:typeahead-input name="state" autocomplete="off" value="">
            <?php foreach($states as $state) { ?>
            <fb:typeahead-option value="<?=$state?>"><?=$state?></fb:typeahead-option>
                <?php } ?>
        </fb:typeahead-input>
    </fb:fbml>
    <input type="submit" value="submit" />
</form>

This code will render the above auto suggest feature. When user type a character, it will suggest a state for him. After he selects the state and click submit your application will get the following data

echo '<pre>';
print_r($_REQUEST);
echo '</pre>';

This outputs:

Array
(
    [fb_sig_locale] => en_US
    [fb_sig_in_new_facebook] => 1
    [fb_sig] => xxxxxxxxxxxxxxx
    [state_val] => Alabama / AL
    [state] => Alabama / AL
)

So look you’ll get two variable state_val and state, you can use whatever to select state by $_REQUEST['state'] or $_REQUEST['state_val']. You may ask why? I think facebook fbml development team can answer it.

The tag is very easy to understand. Just follow the instruction to know about it http://wiki.developers.facebook.com/index.php/Fb:typeahead-input

Parameters of the tag:

Required Name Type Description
required name string The variable name that is sent in the POST request when the form is submitted.
optional autocomplete string Set to off to prevent the browser’s autocomplete feature from overriding this tag’s ability to autocomplete.
size int The size of the input field.
value string The pre-selected option value

So using the following fbml tag you can make customize auto suggest feature for your facebook application.

About mahmud ahsan

Founder And Lead Programmer at iThinkdiff.net

, ,

8 Responses to Auto suggest feature in facebook application

  1. john June 1, 2010 at 1:50 am #

    this is a great problem:
    1°- i don t know if anyone noticed but it is impossible to find questions and blogs around the net talking and giving satisfing answer about this point. and this already doesn’t smell good..
    2°- the auto-complete future in the facebook search box, is NOT AN OPTION, not a choise and it can NOT be erased or deactivated as it should be! facebook always prosied not to store any track of what people have been looking for. now it does. you just tape a letter and immediatly you are linked to all the names you have been looking at beginning with that letter, in order of frequency. it’s way out of the privacy rules! if i allowd by chanse or distraction someone to snoop around with my account, he\she will immediately be able to see who’s profile i am interested the most. and what if my girl and i give a look to somebody’s profile (from my account) and while taping his name (for instance john) after the letter j she will see a list of jennifers and jades??

    is there anyone who knows more about? in ALL the blogs and help discussion on fb the subject is banned or only superficially skimmed, and i dont think it’s just a case: THEY DONT WANT TO GIVE MORE EXPLAINATION ABOUT THIS! PLEASE HELP

  2. http://www.tehran123.com کنسرت November 20, 2010 at 6:27 am #

    very gooooooooood.
    کنسرت http://www.tehran123.com کنسرت

  3. Anoo March 3, 2011 at 1:31 pm #

    I wonder that does the code above still work? Because FB app have been updated every second, so i really wanna kn that it works or not?
    If it works, y i can’t get as the same example as urs?

  4. Carl January 31, 2012 at 1:25 pm #

    this is not working anymore. By june 1 2012 fbml will be depracated.

  5. anar qasimli March 14, 2012 at 4:01 am #

    100

  6. graphic design May 2, 2012 at 1:11 pm #

    That you are my role models. Many thanks for that post

  7. Hasan Lie June 4, 2013 at 11:32 am #

    nice post you will very excited to being visiting your website can get what I was seeking for this acne no more ebook work review

Leave a Reply