jquery - 单击外部某处时，jquery关闭自动建议列表

Question

我是 jquery 的新手，我已经为自动建议搜索框编写了这个脚本。一切正常，但是当用户在页面外部单击时，列表保持打开状态。我在这里找到了 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();
    }

});

});

Answer 1

触发时使用模糊功能 ，当它丢失时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

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

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