Pxxo_Widget_Input_Livesearch_Suggest

Ce widget se présente sous la forme d'un champ de saisie classique à inclure dans un formulaire généré ou non via un Pxxo_Widget_Form. Ce champ a la particularité de proposer au fur-et-à-mesure de la frappe des propositions “d'auto-complétion” via une liste de type Livesearch. Le widget Pxxo_Widget_Input_Livesearch peut avoir exactement le même comportement que celui-ci. L'intérêt de Pxxo_Widget_Input_Livesearch_Suggest est de répondre simplement à un besoin particulier ainsi le nombre de ces paramètres est très restreint par rapport au Pxxo_Widget_Input_Livesearch.

• Exemple d'utilisation en ligne

On peut l'utiliser de 2 manières différentes : soit on l'instancie par l'intermédiaire d'un Pxxo_Widget_Form, soit l'utiliser directement dans un formulaire “maison”. Vous avez remarqué que ce widget peut prendre énormément de paramètres. De cette manière son comportement et les résultats obtenus sont très variés afin de répondre aux plus larges besoins.

Il suffit d'instancier un Pxxo_Widget_Form en lui spécifiant quelques paramètres comme le montre l'exemple suivant :

$params = array ( 'inputs' => array( 
                                 array( 
                                     'type' => 'Livesearch_Suggest', 
                                     'id' => 'test1', 
                                     'label' => 'pays',
                                     'urlquery' => './query_pays.php'
                                 ),
                         )
         );
$o = new Pxxo_Widget_Form($params);

Aucune subtilité (cf. paramètres).

L'exemple ci-dessous illustre la structure attendue générée par le script interrogé pour répondre à la requête que le widget a constitué.

<div id="myResult">
  <ul>
    <li>
      <ul>
        <li><span>TE.147253</span><span>ITALGIURE</span></li>
        <li><span>TE.118750</span><span>Italian ENEA</span></li>
        <li><span>TE.118751</span><span>Italian ENEL</span></li>
        <li><span>TE.141608</span><span>Italianisme</span></li>
        <li><span>TE.826</span><span>Italie</span></li>
      </ul>
    </li>
  </ul>
</div>

Dans cet exemple, on voit une liste (“ul”) de 5 items. Chacun d'eux se trouve dans un élément “li”. Le contenu de ce dernier est structuré via des balises “span”. Le premier “span” contient l'identifiant de l'item, le second contient le libellé qui sera affiché. La présence de l'identifiant est obligatoire mais celui-ci peut être égal au libellé dans le cas où, par exemple, l'applicatif n'a pas besoin de véhiculer un identifiant.

ATTENTION veuillez respecter scrupuleusement cette structure dans le cas contraire l'auto-complétion risque de ne pas fonctionner. À noter qu'il est possible d'utiliser la structure un peu plus riche du Pxxo_Widget_Input_Livesearch, cependant les informations complémentaires contenues dans celle-ci ne seront pas exploitées.

Il est mentionné dans le tableau décrivant les paramètres :

Cette restriction est liée à l'utilisation d'AJAX. Cependant on peut être coincé et devoir utiliser, par exemple, un webservice ne se trouvant par sur le même serveur et/ou arborescence web pour executer la requête de recherche. Pour cela, il suffit de créer une page dans votre arborescence qui fera office de “proxy”. Dans cette page, il suffit d'en récupérer les paramètres et via la fonction php file_get_contents d'ouvrir l'url du webservice et d'en écrire le résultat. L'exemple suivant illustre ces propos :

// encodage de retour
header('Content-Type: text/html; charset=utf-8');
 
// les paramètres à faire suivre
$params  = ( isset($_GET['qry']) ? '&qry='.$_GET['qry'] : '' );
$params .= ( isset($_GET['lng']) ? '&lng='.$_GET['lng'] : '' );
 
// url de destination
$url = 'http://neotrouvetou.com/wbs/query.php?';
 
// récupération et écriture du résultat
echo ( $buffer=file_get_contents($url.$params) ? $buffer : '' );

Dans cet exemple, le script php qui fait office de “proxy” prend en paramètre la langue (“lng”), ainsi que la chaine à rechercher (“qry”). L'URL à interroger est la suivante http://neotrouvetou.com/wbs/query.php et renvoie un résultat encodé en UTF-8 (Attention à bien utiliser le même encodage de caractère en retour que sur la page qui accueille ce widget) et on affiche le retour si il y en a un.