Mootools Facebook Search

Implémentation

La première chose à faire si vous voulez utiliser ce plugin, est bien évidemment d'inclure les différents fichiers requis: (La librairie Mootools, textboxlist.js et fansearch.js)
Il y a aussi une feuille de style afin de présenter les résultats correctement.

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

Le but de ce plugin est d'effectuer une recherche dynamique parmis des données pré définies, donc maintenant que les fichiers requis sont inclus, nous allons devoir créer cet ensemble de données, au format JSON.
Cette liste de données peut être crée dans une page externe de votre choix. Dans cet exemple, la page se trouve à l'adresse /fcbksearchfeed.
Chaque élément de cette liste devra suivre la même structure, c'est à dire comprendre 3 éléments: un nom (caption), champ sur lequel sera effectué la recherche, un numéro (value) qui servira à identifier cet élément, et enfin une photo, utilisée pour illustrer le nom. Par exemple:

 
[
  {
    "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"
  }
]
 

Maintenant que les données sont prêtes nous allons créer le formulaire qui sera utilisé par l'utilisateur pour effectuer ses recherches :

<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>

Cela nous mène à notre dernière partie, faire interagir ce formulaire et les données grâce aux scripts.
Ceci se fait directement dans le script fansearch.js que vous devrez ouvrir afin d'éditer les options suivantes :

• JSONUrl: Adresse url de la page à partir de laquelle vos données json seront crées. (ici /fcbksrchfeed)
• GOTOUrl: Adress url à atteindre quand l'utilisateur sélectionne un élément de la liste dynamique.
• UserInput: Id et Nom de l'input où l'utilisateur tapes, dans notre cas, facebook-demo.
• ResContainer: Id and nom de l'élément qui va contenir les résultats, (ici, le div facebook-auto).

Et voila! Si vous avez besoin d'information, n'hésitez pas à demander!

Partager:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Vous seriez peut être aussi intéressé par::

• 
• 
• 
• 
• 
• 

Commentaires récents