gpt4 book ai didi

php - AJAX即时搜索修改

转载 作者:行者123 更新时间:2023-11-29 14:20:52 25 4
gpt4 key购买 nike

我已经使用 this 通过 AJAX 构建了即时搜索在教程中,我得到了即时结果,但问题是结果所在的 div 保持打开状态。

我想像得到即时结果后那样修改它,然后

  1. 当单击页面上的任意位置时,结果(div)应该消失。
  2. 当鼠标再次悬停在输入字段上时,结果(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='';)"/>

请提出任何执行此操作的方法。

谢谢。

最佳答案

令人讨厌的方式

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

关于php - AJAX即时搜索修改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11777679/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com