2010-04-09 46 views
0

搜索我從http://www.w3schools.com/php/php_ajax_livesearch.asp嘗試實時搜索和我的打在我需要獲得鼠標向上和向下的鼠標功能的代碼我,因爲我是新來的阿賈克斯...阿賈克斯現場與PHP

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); 
xmlhttp.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; 
} 
+0

只是想指出,[W3Schools可能不是最好的來源](http://w3fools.com/)。 – Gumbo 2011-03-18 09:25:17

+0

嗨.... 這個例子是處理關於MySQL數據庫的文本文件是什麼?你能告訴我一些MySQL數據庫的例子嗎?請提前謝謝 – 2010-08-06 09:29:38

回答

3

請不要編寫自己的代碼來執行XmlHttpRequests。使用圖書館 - jQuery是完美的這個目的是太棒了。 jQuery也有很好的鉤子來響應鍵盤和鼠標事件觸發javascript處理程序。

+0

你能告訴我該怎麼做.... – ramesh 2010-04-09 07:50:42

0

試試這個jQuery搜索我最近編碼.. (要使用這一點,你必須包括jQuery的庫中的)

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(例子):

#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>"; 
} 
} 

如果你需要一個搜索標記高亮的代碼示例,請讓我知道。