Implémentation du mécanisme « autocompletion » sous Typo3

1) Installation du mécanisme client (JavaScript)

Tout d’abord il faut récupérer les librairies JavaScript sur le site JQuery : JQuery autocomplete

Puis vous devez intégrer dans votre HEAD HTML au minimum les deux sources suivantes:

<script type="text/javascript" language="javascript"
src="fileadmin/javascript/jquery-latest.js"></script>
<script type="text/javascript" language="javascript"
src="fileadmin/javascript/jquery.autocomplete.js"></script>

2) Implémentation de la classe avec l’ « autocompletion »

Voici un exemple simple d’intégration de l’ « autocompletion » dans un « plugin » Typo3.

<?php
// ...
require_once(PATH_tslib.'class.tslib_pibase.php');
// ...
class tx_extname_pi1 extends tslib_pibase {
	public $extKey = 'extname';
	private $content = '';
	private $ajaxGetDataFile;

// ...

	public function main($content, $conf) {
		$this -> conf = $conf;
		$this -> pi_setPiVarDefaults();
		$this -> pi_loadLL();
		$this -> pi_USER_INT_obj = 1;
		$this -> ajaxGetDataFile = $this -> pi_getPageLink($GLOBALS['TSFE'] -> id).'?eID='.$this -> extKey;
		$this -> content = $this -> makeHtml();

		return $this -> pi_wrapInBaseClass($this -> content);
	}

// ...

	private function makeHtml() {
		$this -> addAdditionalJSToHeaderPart(); // Add JS part for JQuery

// ...

	}

// ...

	/**
	 * Add additional header data
	 *
	 * @return	void
	 */
	private function addAdditionalJSToHeaderPart() {
			$jsString = '<script type="text/javascript">
							/* <![CDATA[ */
							$(document).ready(function() {
								$("#tx_extname_pi1").autocomplete("'.$this -> ajaxGetDataFile.'&pid='.$this -> conf['your_pid_target'].'", {
									minChars: 2,
									resultsClass: "ac_results my_css_class",
									selectFirst: false,
							        max: 9,
							        autoFill: 0,
							        delay: 400,
								    scroll: 1,
									matchContains: 1,
								    multiple: 0,
								    multipleSeparator: ", "
							    })
							    jQuery("#tx_extname_pi1").result(function (event, data, formatted) {
					              	jQuery("#your_form_tag_name").submit();
					            });
							});
							/* ]]> */
						 </script>';
	 		$GLOBALS['TSFE'] -> additionalHeaderData[$this -> extKey] = $jsString;			

	}
}

// ...

if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/extname/pi1/class.tx_extname_pi1.php']) {
	include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/extname/pi1/class.tx_extname_pi1.php']);
}
?>

L’attribut $ajaxGetDataFile fait appel à une classe eID, je ne reviendrai pas sur ce concept, vous avez un article disponible sur ce site qui explique cette implémentation.

// ...
$this->ajaxGetDataFile = $this->pi_getPageLink($GLOBALS['TSFE']->id).'?eID...
// ...

...
resultsClass: "ac_results my_css_class",
...
jQuery("#your_form_tag_name").submit();

...
<form id="your_form_tag_name"
...