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:


PHP Code:
//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);
mysql_num_rows($squery) != 0) && ($s != "")){
$sLookup mysql_fetch_array($squery)){
$displayName $sLookup["name"];
$output .= '<span style="cursor:pointer"><li onclick="sendToSearch(\'' $displayName '\')">' $displayName '</li></span>';



HTML Code:

<title>TNT Horse Finder</title>

function createRequestObject(){
var request_o;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_o = new ActiveXObject("Microsoft.XMLHTTP");
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) {
if(http.readyState == 4 && http.status == 200) {
document.getElementById('searchResults').innerHTML = http.responseText; 

function sendToSearch(str){
document.getElementById('qsearch').value = str;
document.getElementById('searchResults').innerHTML = "";

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

<div style="background-color:#0099CC; color:#fff; clear:both;" >
<form id="quick-search" action="a2z.php" method="get" >
<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">