Cibler élément au click Jquery

Bonsoir,

Je me permet de poster un message car j'ai un petit soucis en jQuery :
J'ai créé un système d'autocomplétion en Ajax qui permet d'avoir dans mon champ "rechercher" la liste de différents projets stockés dans la base de donnée.
Le but est que, quand je tape la recherche dans mon champ, j'ai une liste qui correspond à ma recherche et ensuite, quand je clique sur un des éléments, il s'affiche dans le champ et envoie la requête.

Mon problème qui devrait pas être compliqué à résoudre est que je n'arrive pas à cibler l'élément au clique pour qu'il soit le seul à s'afficher.
Si j'ai qu'un seul projet tout va bien mais quand il y en a plusieurs, ils sont tous ajoutés dans le input.

Je vais mettre du code pour que ce soit plus clair. Je peux ajouter des captures si besoin.

Mon XHTML :

<form id="rechercher" action="search.php" method="post">

<table style="margin: auto; width: 150px;">
	<tr>
		<td width="380">
			<div id="SearchBox">
				<input autocomplete="off" id="SearchInput" name="SearchInput" value="Rechercher" />
			</div>
			
		</td>
	</tr>
	<tr>
		<td>
			<div style="position: relative; left: 20px; top: -30px;">
				<div id="SearchResults"></div>
			</div>
		</td>
	</tr>
</table>

</form>

Mon PHP :

if(isset($_POST['SearchInput'])) {
		$SearchInput = strtolower($_POST['SearchInput']);

		$data = mysql_query('select * from projet where titre like "%'.$SearchInput.'%" OR auteur like "%'.$SearchInput.'%" order by titre desc limit 10 ');
		while($projet = mysql_fetch_assoc($data)) {
		
                $Name = utf8_encode($projet['titre']);
		$Name = str_replace($SearchInput, '<span class="highlight">'.$SearchInput.'</span>', $Name);
		$Name = str_replace(ucfirst($SearchInput), '<span class="highlight">'.ucfirst($SearchInput).'</span>', $Name);
			
		echo '<span class="results">'.$Name.'</span>';
			
		}

Mon JS :

jQuery(function($) {
			
				
				// Quand la souris pointe dans le champ
				// on remplace le texte par un champ vide
				// et on change la couleur
				$("#SearchInput").focus(function() {
					if($("#SearchInput").val() == "Rechercher") {
						$("#SearchInput").val("");
					}
					$("#SearchInput").css("color", "#000000");
				});
				

				// Quand la souris sort du champ
				// on remet le texte et la couleur d'origine
				// on fait remonter le div des résultats
				$("#SearchInput").blur(function() {
					if($("#SearchInput").val() == "") {
						$("#SearchInput").val("Rechercher");
						$("#SearchInput").css("color", "#999999");
					}
					$("#SearchResults").slideUp();
				});
				

				// Si la touche DEL est enfoncée, on enlève un caractère
				// Sinon on rajoute un caractère correspondant à la touche enfoncée
				$("#SearchInput").keydown(function(e) {
					if(e.which == 8) {
						SearchText = $("#SearchInput").val().substring(0, $("#SearchInput").val().length-1);
					}
					else {
						SearchText = $("#SearchInput").val() + String.fromCharCode(e.which);
					}
					$("#SearchResults").load("ajax.php", { SearchInput: SearchText });

					$("#SearchResults").slideDown();
					
				});

					
				
				// Si on clique sur un des résultats
				// On l'affiche dans le champs en supprimant les balises
				$("#SearchResults").click(function() {
						

					
					$valeur = $('#SearchResults').text();
						
					$("#SearchInput").val($valeur);
					$("#rechercher").submit();
					
				});
});

C'est la dernière fonction au click qui ne fonctionne pas. J'ai essayé de cibler la classe results au click mais ça ne fonctionne pas.