改造AJAX即時搜索

我必須建立與使用AJAX this教程即時搜索，我的即時結果，但問題是在結果來保持打開那裏的股利。改造AJAX即時搜索

我想修改它喜歡的結果（DIV）應消失網頁上的任意位置單擊時的即時結果，那麼

後。
和（DIV）當鼠標懸停再次輸入字段結果應該重新出現。

Ajax代碼

<script type="text/javascript"> 
function showResult(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("search-result").innerHTML=""; 
    document.getElementById("search-result").style.border="0px"; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("search-result").innerHTML=xmlhttp.responseText; 
    document.getElementById("search-result").style.border="1px solid #A5ACB2"; 
    } 
    } 
xmlhttp.open("GET","instant-search.php?keyword="+str,true); 
xmlhttp.send(); 
} 
</script>

HTML代碼

<div id="search"> 
<form action="" method="get" id="search-form" > 

<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/> 

<select name="" id="search-select"> 
<option value="all" >All</option> 
<input type="hidden" name="" value="" /> 
</select> 

<input type="submit" value="Search" id="search-btn" /> 

</form>  
</div> 
<div id="search-result"></div>

PHP代碼是簡單的MySQL的全文搜索查詢。

我試着像添加此，但什麼也沒有發生

 <input name="keyword" type="text" size="50" id="search-input" onkeydown="showResult(this.value)" onclick="(this.value==this.defaultValue) this.value='';" onmouseout="showResult(this.value='';)"/>

請建議這樣做的任何方式。

謝謝。

來源

2012-08-02 Tall boY

只是要提到，但它更容易在jQuery中使用成功回調。 – Undefined 2012-08-02 12:45:07

雅，但我不想使用jQuery。你知道的任何解決方案。 – 2012-08-02 12:50:29

恐怕我只有一個jQuery爲你解答 – Undefined 2012-08-02 12:58:31

一個討厭的方式

<body> 
<div id="main" onclick="fx(0)"> 

<div id="search"> 
<form action="" method="get" id="search-form" > 
<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/> 
<select name="" id="search-select"> 
<option value="all" >All</option> 
<input type="hidden" name="" value="" /> 
</select> 
<input type="submit" value="Search" id="search-btn" /> 
</form>  
</div> 
<div id="search-result" onclick="fx(1)"></div> 

</div> 
</body> 

<script> 
function fx(var flag) 
{ 
    // document.getElementById(theIdYouWantToShowHide).style.display="none" or inline or block ... 
} 
</script>

來源

2012-08-02 13:34:32 Sourav

這就是問題如何在Java腳本隱藏，jQuery中我可以用秀（），隱藏（） – 2012-08-02 13:53:55

@TallboY更新！ – Sourav 2012-08-02 14:43:36

無論如何，我以相同的方式得到它。感謝你的時間 – 2012-08-02 14:52:03

明白了最後，希望這可以幫助別人了。

<script type="text/javascript"> 
function showResult(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("search-result").innerHTML=""; 
    document.getElementById("search-result").style.border="0px"; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("search-result").innerHTML=xmlhttp.responseText; 
    document.getElementById("search-result").style.border="1px solid #A5ACB2"; 
    document.getElementById("search-result").style.display="block"; 
    document.getElementById("search-input").onmouseover = function(){show_box()}; 
    } 
    } 
xmlhttp.open("GET","instant-search.php?keyword="+str,true); 
xmlhttp.send(); 
} 

function close_box(){ 
document.getElementById("search-result").style.display="none"; 
} 
function show_box(){ 
    document.getElementById("search-result").style.display="block"; 
} 

document.onclick = function(){close_box()}; 

</script>

來源

2012-08-02 14:42:21

改造AJAX即時搜索

回答

相關問題