Ajax live search with PHP

I have tried live search from http://www.w3schools.com/php/php_ajax_livesearch.asp and i an struck in i need to get on mouse up and mouse down function for this code and i as i am new to ajax ...

var xmlhttp;

function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
xmlhttp=GetXmlHttpObject()
if (xmlhttp==null)
  {
  alert ("Your browser does not support XML HTTP Request");
  return;
  }
var url="livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged ;
xmlhttp.open("GET",url,true);
x开发者_运维问答mlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
  document.getElementById("livesearch").style.border="1px solid #A5ACB2";
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

---

Please, don't write your own code to do XmlHttpRequests. Use a library - jQuery is fantastic for exactly this purpose. jQuery also has great hooks to fire javascript handlers in response to keyboard and mouse events.

---

Use jQuery with the autocomplete plugin:

http://docs.jquery.com/Plugins/Autocomplete

---

Try this JQuery search I recently coded.. (To use this you must include the JQuery-Library in your )

HTML:

<form name="searchform" action="" method="post" onsubmit="">
    <input type="text" name="q" class="inputTextSearchBox" id="livesearch" onkeyup="searchIt()" onblur="if (this.value == '') {this.value = 'Search..';}" onfocus="if(this.value == 'Search..') {this.value = '';}" value="Search.." onKeyPress="return disableEnterKey(event)" />
</form>
<div id="LSResult" style="display: none;"></div>

CSS (example):

#LSResult {
    background-color: #FFFFFF;
    border: 1px solid #e9e9e9;
    padding: 20px 5px 5px;
    position: absolute;
    width: 250px;
    z-index: 98;
    -webkit-border-radius: 6px 0 6px 6px /*{cornerRadius}*/;
    -moz-border-radius: 6px 0 6px 6px /*{cornerRadius}*/;
    border-radius: 6px 0 6px 6px /*{cornerRadius}*/;
    -khtml-border-radius: 6px 0 6px 6px /*{cornerRadius}*/;
    -webkit-box-shadow: 2px 3px 2px #888;
    -moz-box-shadow: 2px 3px 2px #888;
    box-shadow: 2px 3px 2px #888;
    }

JQuery

function searchIt() {
var inputValue = $('#livesearch').delay(100).val();
var linkResult = "livesearch.php?q=" + encodeURIComponent(inputValue);

if((inputValue != '')&&(inputValue != ' ')){
    $('#LSShadow').load(linkResult);
    $('#LSResult').show(100);
} else {
    $('#LSShadow').load(linkResult);
    $('#LSResult').hide(100);
}
}

// Disabling form submition by enter key
function disableEnterKey(e)
{
    var key;

    if(window.event)
        key = window.event.keyCode;     //IE
    else
        key = e.which;     //firefox

    if(key == 13)
        return false;
    else
        return true;
}

PHP (Livesearch.php)

if(isset($_REQUEST['q'])) {
$q = $_REQUEST['q'];
$q = trim(urldecode($q));
$q = ereg_replace("([  ]+)", "%",$q);

// Your SQL 
$sql2 = "SELECT DISTINCT * FROM table WHERE ";
$sql2 .= "Field LIKE '%$q%'";
$sql2 .= "  ORDER BY Field";

$sq2 = mysql_query($sql2);
$st2 = mysql_num_rows($sq2);

print "<?xml version='1.0' encoding='utf-8'  ?>";

if($st2>=1)
    {
    while($a = mysql_fetch_array($sq2))
        {
        print your Results in list form
        }
    }
} else {
    print "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tr><td width=\"250px\"><h4>No result..</h4></td></tr></table>";
}
}

If you need a search tag highlighting code example, please let me know.