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>
Reply With Quote
Bookmarks