AJAX即时搜索的修改
Modification For AJAX Instant Search
我使用本教程用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='';)"/>
请提出做这件事的方法。
谢谢。
一种讨厌的方式
<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>
终于明白了,希望这也能帮助到其他人。
<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>
相关文章:
- 用程序搜索JQuery数据表中的文本
- 在html Select中添加搜索
- 在Safari执行javascript之前对其进行修改
- Ajax Live搜索发布到Laravel视图
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- 学生搜索项目jquery/javascript
- 用于搜索的聚合物嵌套绑定
- 在javascript中搜索具有重复值的两个数组中的匹配值
- 如何修改订阅上的搜索查询
- AJAX即时搜索的修改
- Lodash搜索对象属性并修改值
- 使用 Greasemonkey 修改 Craigslist 的默认搜索结果排序
- 修改sphider搜索.php文件并请帮助我
- JavaScript Auto Complete 搜索栏修改帮助
- 在搜索结果之前修改搜索小部件值
- 使用list.js(搜索函数)搜索HTML表-修改以显示所有不包括搜索词的行
- 如何修改这段代码,使文档每次都搜索它
- 用户通过表单提交关键字;我怎样才能得到'关键词'搜索URL的一部分,以便在页面中进行修改
- 如何在内容脚本中修改谷歌搜索结果页面
- Jquery实时搜索-修改行为