Mootools Facebook Search

When it comes to social web, facebook is clearly a reference, packed with outstanding features. Among them, their famous autocompletion search input, allowing you to quickly find a particular friend. Another one that I like is when you want to send a message, it is really easy to select the friends you want to send it to. It is now being used by hotmail as well.

There's a Mootools script for this already, developped by Guillermo Rauch, and that I use for several projects, but I didn't find any script performing an autocompletion search like the facebook one.

From the Guillermo Rauch's script, and thanks to the help of Josh Moont from Inspire, we modified the code to obtain a solution based on the same search meachnism, but with a different output, resulting in the mootools facebook search plugin. I hope you will enjoy it.

Source and © Jeremy DESVAUX .

Demonstration

How to setup

The First thing to do if you want to use that plugin is to include the different files, (The Mootools library, textboxlist.js and fansearch.js).
There's also a basic stylesheet to render the results properly.

/** Mootools inclusion **/
<script type="text/javascript" src="Path_to/Mootools.js"></script>
/** Textboxlist inclusion **/</h3>
<script type="text/javascript" src="Path_to/textboxlist.js"></script>
/** Fansearch inclusion **/</h3>
<script type="text/javascript" src="Path_to/fansearch.js"></script>
/** Additional Style **/
<link href="Path_to/style.css" rel="stylesheet" type="text/css"/>

The purpose of that plugin is to dynamically search among a predefined set of data so now that we have included the files, we need to create those data under the form of a JSON array.
This can be done in a separate page of your choice. In our case, we'll call it fcbksearchfeed.
Every piece of information needs to have 3 things: a caption (the name that will be displayed as text), a value (the id of that information), and a picture path (to display the image).
for example:

 
[
  {
    "caption": "Sylvia Molloy",
    "value": "1",
    "picture": "lib/fcbksrch/imgs/imgtest (1).jpg"
  }, 
  {
    "caption": "Manuel Mujica Lainez",
    "value": "2",
    "picture": "lib/fcbksrch/imgs/imgtest (2).jpg"
  }
]

Now that the files are included and the data set is ready, we create the form with the search input as follows:

<form id="fcbksrchform">
<ul>
  <li id="facebook-list" class="input-text">
    <input type="text" value="" id="facebook-demo" name="facebook-demo"/>
    <div id="facebook-auto">
      <div class="default">Type a name</div>
        <ul class="feed"> </ul>
      </div>
  </li>
</ul>
</form>

This leads us to our last part. At this point, we have all our separated files ready, we then need to register them all with the fansearch script to make it working.
So you need to open the fansearch.js file and specify the following options:

JSONUrl: Url of the json page from where to fetch the data. (in our case /fcbksrchfeed)
GOTOUrl: Url you want to go to when the user clicks on of the list elements. (Or when he presses enter).
UserInput: Id and Name of the input where the user types, here the facebook-demo input.
ResContainer: Id and Name of the results container, where all the results will appear (here the facebook-auto div).

All done! If you need any extra information do not hesitate to ask. Hope this will help.