AJAX 即时搜索的修改答案

【问题标题】：Modification For AJAX Instant SearchAJAX 即时搜索的修改
【发布时间】：2012-08-02 22:50:15
【问题描述】：

我已经使用this 教程使用 AJAX 构建了即时搜索，我得到了即时结果，但问题是结果出现的 div 在那里保持打开状态。

我想在得到即时结果后修改它，然后

当单击页面上的任意位置时，结果（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='';)"/>

请提出任何方法。

谢谢。

【问题讨论】：

只是提一下，但在 jQuery 中使用成功回调要容易得多。
是的，但我不想使用 jquery。你知道的任何解决方案。
恐怕我只有一个jQuery答案给你
@TallboY 我同意 sam 的观点，使用 Jquery 非常简单，实用，代码更少

标签： php javascript mysql html ajax

【解决方案1】：

一个讨厌的方式

<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>

【讨论】：

这就是如何在 java-script 中隐藏的问题，在 jquery 中我可以使用 show(), hide()
无论如何，谢谢，虽然我得到了同样的方式。感谢您的时间

【解决方案2】：

终于明白了，希望这对其他人也有帮助。

 <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>

【讨论】：