自動完成搜索建議下拉彈出式菜單

我試圖做一個彈出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

自動完成搜索建議下拉彈出式菜單

回答

相關問題