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 Code:
<?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 Code:
<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>