PHP ajax add to search problems

I have a live search (code below) on my site that is pulling horse names from my database.

When you type in the search bar it searches for a closest match.

The only thing I dont like about the search facility is that you have to click on the result before clicking search.

If I click search before clicking on the result it will use my input as the result.

IE. Search for Red will bring up a result of Redrum

now if I click search it will use Red as my result opposed to Redrum.

Sorry for the ramble, heres a link to explain what I mean:

http://thenovicetipster.com/a2z_search.php

live_a2z_search.php


<?php
//db connection
$s = mysql_real_escape_string($_REQUEST["s"]);
$output = "";
$s = str_replace(" ", "%", $s);
$query = "SELECT DISTINCT * FROM races WHERE name LIKE '%" . $s . "%' LIMIT 1";			
$squery = mysql_query($query);
if((mysql_num_rows($squery) != 0) && ($s != "")){
while($sLookup = mysql_fetch_array($squery)){
$displayName = $sLookup["name"];
$output .= '<span style="cursor:pointer"><li onclick="sendToSearch(\\'' . $displayName . '\\')">' . $displayName . '</li></span>';
}
}	

echo $output;
?>

a2z_search.php


<html>

<head>
<title>TNT Horse Finder</title>

</head>
<body>
<script>
function createRequestObject(){
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_o = new XMLHttpRequest();
}
return request_o;
}

var http = createRequestObject();

function liveSearch()
{
var url = "live_a2z_search.php";
var s = document.getElementById('qsearch').value;
var params = "&s="+s;
http.open("POST", url, true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {
if(http.readyState == 4 && http.status != 200) {
document.getElementById('searchResults').innerHTML='<li>Loading...</li>';
}
if(http.readyState == 4 && http.status == 200) {
document.getElementById('searchResults').innerHTML = http.responseText;
}
}
http.send(params);
}

function sendToSearch(str){
document.getElementById('qsearch').value = str;
document.getElementById('searchResults').innerHTML = "";
}
</script>


<?php include_once ('menu.php') ?>


<div style="background-color:#0099CC; color:#fff; clear:both;" >
<form id="quick-search" action="a2z.php" method="get" >
<p>
<label for="qsearch">Search:</label>
<input id="qsearch" type="text" name="horse" onKeyUp="liveSearch()"  autocomplete="off" />
<input type="submit" value="Follow Horse"/></p>
<ul id="searchResults">
</ul>
</form>
</div>


</div>
</div>

</body>
</html>

This is the expected and desired result.

If you want to limit people’s selections to only the full name of the breed, use a select box.