【发布时间】：2012-08-04 08:43:20
【问题描述】：
我已经使用 javascript 实现了即时搜索，除了在某一时刻之外，我都能让它工作。
我已经在即时搜索中实现了以下功能，并且工作正常。
- 结果来自“搜索结果”div。
- 单击文档上的任意位置时，结果消失。
- 将鼠标悬停在输入字段上或单击输入字段时，结果重新生成器。
- 添加了对文档单击后重新出现结果的淡化效果。
这 1. 实现不正常。
在文档单击后添加了对结果消失的淡入淡出效果。它是第一次工作，当单击文档时结果消失并具有褪色效果，但在鼠标悬停或单击输入字段结果重新出现后，单击文档结果不消失且没有效果。
这些是我的 Javascript 代码。
<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").autocomplete="off";
document.getElementById("search-result").style.display="block";
var fired = false;
document.onclick = function(){
close_box();
if(!fired){
document.getElementById("search-input").onmouseenter = function(){
show_box_fadeIn()
delete this.onmouseenter;};
};
}
document.getElementById("search-input").onmouseleave = function(){
var fired = true;
if(fired){
document.getElementById("search-input").onmouseenter = function(){
show_box()};
};
}
document.getElementById("search-input").onclick = function(e){
if(!e) {
e = window.event;
}
if(e.stopPropagation && e.preventDefault) {
e.stopPropagation();
e.preventDefault();
} else {
e.cancelBubble = true;
e.returnValue = false;
}show_box(); return true;
};
//////////EVENTS AFTER DOCUMENT ONCLICK//////////
var fired = false;
var closeBox = false;
document.onclick = function(){
if(!closeBox){
close_box_fadeOut();
}
if(!fired){
document.getElementById("search-input").onmouseenter = function(){
show_box_fadeIn()
delete this.onmouseenter;};
};
}
document.getElementById("search-input").onmouseleave = function()
{
var fired = true;
if(fired){
document.getElementById("search-input").onmouseenter = function(){show_box()};
};
}
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
//////////FUNCTIONS//////////
function show_box(){
document.getElementById("search-result").style.display="block";
}
function show_box_fadeIn(){
setOpacity( 0 );
document.getElementById("search-result").style.display="block";
fadeIn()
}
function close_box(){
document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
if(closeBox){
document.onclick = function(){close_box();}
return;
}
closeBox = true;
setOpacity( 100 );
document.getElementById("search-result").style.display="block";
fadeOut();
setTimeout(close_box, 800);
}
function setOpacity( value ) {
document.getElementById("search-result").style.opacity = value / 10;
document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeIn() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 10 * i );
}
function fadeOut() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
</script>
html 代码。
<input name="keyword" type="text" size="50" id="search-input" value = 'Search'; onkeydown="showResult(this.value)" /></br></br>
请提出任何可能的方法来做到这一点，我希望有人可以帮助我。
谢谢。
【问题讨论】：
-
伙计，我不会再尝试重新整理你的烂摊子了。尝试发布一些更好的东西，否则你几乎不会得到答案。另外，尽量总结你的问题，不要贴出实际有效的部分。
-
我试着只问我的问题并得到了一个可行的解决方案，但是在我的代码中实现它时它不起作用，这就是为什么我提出我的漏洞代码以便更好地理解。希望你能理解。
-
我也不太了解 javascript，我努力让它工作这么久。
-
“你的代码”是由不同作者拼凑而成的 sn-ps，加上你自己的代码。如果你想让你的代码真正工作，而不是依赖一些通用框架（比如 jQuery 或其他），使用教程来学习这些东西，然后尝试自己构建你的代码，给它一个更有机的外观。它对您和其他所有人来说都更容易阅读和维护。
-
知道了，我没有找到任何可以借鉴的教程，所以从我能找到的每一个地方找了一些东西，并将它们汇总在一起以供实施。
标签： javascript html ajax search