自动完成搜索建议下拉弹出式菜单

我试图做一个弹出div（当文本框值发生变化时），并且可以通过单击div外部的任何地方来关闭它（可见性：无）。类似于Google建议下拉菜单。自动完成搜索建议下拉弹出式菜单

我怎样才能知道鼠标点击发生在div或外部的天气。

我需要使用javascript和jsp来实现这个。

请帮忙。

2011-03-03 kanap008

这个问题可能是相关的（用于找到在阵列类似于搜索查询字）：http://stackoverflow.com/questions/11377096/find-similar-words-in-array-of -word – 2012-10-26 04:39:31

此外，这里有一些更相关的问题（用于查找类似的单词）：http://stackoverflow.com/search?q=javascript+levenshtein+distance – 2012-10-26 04:41:47

jQuery的解决办法是

$("body > div").click(function() { 
if ($(this).attr("id") == "div-id") { 
    // inside the DIV 
} else { 
    // not inside the DIV 
} 
});

或

$("html").click(function (e) 
{ 
if (e.target == document.getElementById("div-id")) 
    alert("Inside DIV"); 
else 
    alert("Outside DIV!"); 
});

或JavaScript片段将是这样的：

<script type="text/javascript"> 
document.onclick=check; 
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 
var obj = document.getElementById('div-id'); 
if(target!=obj){obj.style.display='none'} 
} 
</script>

来源

2011-03-03 04:27:45

你能解释我这一行吗“var target =（e && e.target）||（event && event.srcElement）;” – kanap008 2011-03-03 05:28:47

当文档在任何地方点击并通过'click'事件时，函数'check'将被调用。该行检查事件是否确实作为函数的参数传递（在大多数浏览器中），或者如果不是（其他浏览器，可能是IE）尝试从全局变量'event'获取事件。 – Dan 2011-03-03 18:32:25

编写纯JavaScript通常很麻烦，因为必须编写不同的代码才能使其在所有浏览器中正常工作。如果有人使用jQuery，那么所有这些都是在幕后进行的，所以你不必担心忘记处理特定的浏览器。 – Dan 2011-03-03 18:33:33

一种方法是在后面弹出一个覆盖整个屏幕（隐形）的div，并捕获该div上的点击以关闭两个popup div。您还可以尝试捕获body标记上的点击，并且应该捕获点击任何位于div外部的点击（或者在div内部以及事件泡泡 - 您可能需要执行一些测试）。

有时候一个更简单的方法是使用超时，就像弹出的CSS菜单一旦你的鼠标离开菜单几秒钟后消失。您可以捕获onmouseleave事件，启动一个计时器，并且只要没有另一个onmouseenter，例如两秒钟，然后隐藏弹出式div。

希望这会有所帮助！

来源

2011-03-03 04:25:04 mellamokb

一个问题。由于背景div覆盖整个屏幕，因此单击弹出窗格div也会导致div关闭。如果我错了，请纠正我。 – kanap008 2011-03-03 05:27:05

@ kanap008：如果点击事件没有冒泡，则不应该。你可以使用'window.event.cancelBubble = true;'来停止事件到达两个div。请参阅http://www.quirksmode.org/js/events_order.html – mellamokb 2011-03-03 13:08:59

这是jQuery的'e.stopPropagation（）'在窗帘后面执行的操作。 – Dan 2011-03-03 18:35:50

下面是用jQuery的例子。如果您点击“测试”文本，则会显示其他文本。除了新出现的文本以外，单击其他任何地方都会使其消失。

这是可行的，因为如果点击发生在内部（在这种情况下为.toggle对象），我们会调用e.stopPropagation()来使点击事件停止向整个窗口进一步传播。但是，如果点击发生在其他地方，它会直接传播到窗口，并使.toggle消失。

请参阅example它工作在jsfiddle。

<script src="js/jquery-1.4.4.min.js"></script> 
<script> 
    $(function(){ 
     $('.test').bind('click', function(e){ 
      $('.toggle').fadeIn(); 
      e.stopPropagation(); 
     }); 
     $('.toggle').bind('click', function(e){ 
      e.stopPropagation(); 
     }); 
     $(document).bind('click', function(){ 
      $('.toggle').fadeOut(); 
     }); 
    }); 
</script> 

<a class="test" href="#">test</a> 
<div class="toggle">asdasdsa</div>

来源

2011-03-03 04:29:24 Dan

对不起，我不知道jQuery，甚至基本知识。但是谢谢 – kanap008 2011-03-03 05:28:21

你并不需要。这只是一个javascript框架，使您可以更轻松地将功能绑定到事件，以及在DOM树中定位对象（等等）。为了让这个例子工作，所有你需要做的就是从他们的网站下载jquery js，并将它包含在你的html中，就像我的代码的第一行一样。 – Dan 2011-03-03 18:29:16

自动完成搜索建议下拉弹出式菜单

回答

相关问题