[AJAX] Autocomplete - afficher les données de ma base de donnée

Bonjour, je suis étudiant.
Actuellement en stage, je développe en PHP une petite application RH.

J'arrive à un moment où je dois utiliser Ajax avec l'autocomplète afin d'actualiser ma page sans la rafraichir, mais ici je bloque totalement.
J'ai une liste de 200 salarié et je voudrai à la suite d'avoir taper 2-3 lettre choisir le salarié que j'ai besoin. Seulement je ne trouve pas mon erreur.

Voilà mon code et ma bdd.
Merci d'avance !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CREATE TABLE IF NOT EXISTS `salarie` (
  `idSalarie` int(11) NOT NULL AUTO_INCREMENT,
  `idContrat` int(11) NOT NULL,
  `idDirection` int(11) NOT NULL,
  `idLieu` int(11) NOT NULL,
  `nomSalarie` varchar(255) NOT NULL,
  `prenomSalarie` varchar(255) NOT NULL,
  `mailSalarie` varchar(255) NOT NULL,
  `mailSalarie2` varchar(255) DEFAULT NULL,
  `dateEntree` date NOT NULL,
  `quitterEntrepriseSalarie` tinyint(1) DEFAULT NULL,
  `dateSortie` date DEFAULT NULL,
  PRIMARY KEY (`idSalarie`),
  KEY `fk_salariecontrat` (`idContrat`),
  KEY `fk_salarielieu` (`idLieu`),
  KEY `fk_salariedirection` (`idDirection`)
) ENGINE=InnoDB AUTO_INCREMENT=158 DEFAULT CHARSET=utf8;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php 
 
try 
{ 
	$bdd = new PDO('mysql:host=localhost;dbname=mobilite', 'root', ''); 
} 
catch(Exception $e) 
{ 
 die('Erreur : '.$e->getMessage()); 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Test d'autocomplete</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
 <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<form> 
<input type="text" id="recherche"> 
</form> 
 
<?php 
$req2 = $bdd->query('SELECT CONCAT(nomSalarie," ",prenomSalarie) FROM salarie'); 
$data = array(); 
$data = $req2->fetchAll(PDO::FETCH_COLUMN,0); 
?>
<script language="javascript"> 
<?php 
$js_array = json_encode($data); 
 
echo "var liste = ". $js_array . ";\n"; 
?> 
$('#recherche').autocomplete({ 
source : liste, 
minLength : 1 
}); 
</script>