单击外面的某个地方时，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

当触发器失去focus时使用blur function。

$('#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

这会在触发'blur'事件时隐藏结果，因此当＃search_form_1失去焦点时，当用户点击元素外部时会发生这种情况。

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