0
我已經使用javascript實現了一個即時搜索，我能夠使它工作，除了在一個點上。JavaScript即時搜索div隱藏與褪色效果
我在我的即時搜索中實現了以下功能，並且工作正常。
- 結果出現在「搜索結果」div中。
- 當點擊文檔上的任何地方導致disapper。
- 當鼠標懸停在或輸入字段結果收割機中單擊。
- 文件點擊後重新出現結果淡化效果。
這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>
請提出任何可能的方式來做到這一點，我希望有人在那裏可以幫助我。
謝謝。
男人，我不會再試圖重新收拾你的混亂。嘗試發佈更好的東西，否則你很難得到答案。另外，試着總結一下你的問題，不要發佈實際工作的部分。 – MaxArt 2012-08-04 09:04:57
我試着問我的問題，並得到了一個工作解決方案，但在我的代碼中實現它時，它沒有工作，這就是爲什麼我提出我的洞代碼，以便更好地理解。希望你能理解。 – 2012-08-04 09:13:53
我也不知道JavaScript的很多東西，我很努力的讓它工作了很長時間。 – 2012-08-04 09:14:50