jquery關閉自動建議列表當點擊某處以外

Question

我是新來的jquery，我已經寫了這個腳本的自動建議搜索框。一切工作正常，但當用戶在頁面外某處點擊時，該列表會保持打開狀態。我在這裏找到了兩個類似的例子來說明如何擺脫這種情況，但它不適用於我。任何想法如何做到這一點？這是我的代碼：

$(document).ready(function(){ 

$('#search_form_1').keyup(function(){ 
    var value = $(this).val(); 

    if(value != ''){ 
     $('#search_result').show(); 
     $.post('search_form.php', {value: value}, function(data){ 
      $('#search_result').html(data); 
     }); 

    }else{ 
     $('#search_result').hide(); 
    } 

}); 

}); 

Answer 1

使用blur function時觸發，當它失去focus。

$('#search_form_1').blur(function(){ 
    $('#search_result').hide(); 
}); 

Answer 2

模糊事件怎麼樣？

$(document).ready(function(){ 

$('#search_form_1').keyup(function(){ 
    var value = $(this).val(); 

    if(value != ''){ 
     $('#search_result').show(); 
     $.post('search_form.php', {value: value}, function(data){ 
      $('#search_result').html(data); 
     }); 

    }else{ 
     $('#search_result').hide(); 
    } 

}) 
.blur(function(){ 
    $('#search_result').hide(); 
}); 

Answer 3

這將隱藏結果在觸發「模糊」事件，因此當＃search_form_1失去焦點，當用戶點擊元素之外，這將發生。

$('#search_form_1').blur(function(){ 
    $('#search_result').hide(); 
});