如何使下拉自动完成消失onblur或在jquery中单击外部?

时间:2011-11-18 12:39:54

标签: jquery

下面是调用在搜索框中显示自动完成功能的函数...我希望自动完成功能在布尔消失或点击搜索框外...请告诉我应该在此功能中添加什么来制作点击外面时自动完成下拉消失了吗?

function hideLoader(){
        $('#sub_cont').fadeIn(100);
        $('.search-background').fadeOut(100);
    };

    $('#search').keyup(function(e) {
      if(e.keyCode == 13) {
        showLoader();
        $('#sub_cont').fadeIn(100);
        $("#content #sub_cont").load("../ajax/search.php?val=" + $("#search").val(), hideLoader());
        }
      });

//Fading out the div when the text box is empty
    String.prototype.trim = function() {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        }

    $(".searcher").keyup(function(){

        if($('.searcher').val().trim().length > 0) {
            // is not empty
            showLoader();
            $('#sub_cont').fadeIn(100);
            $("#content #sub_cont").load("../ajax/search.php?val=" + $("#search").val(), hideLoader());
        } else {
            // is empty
            $('#sub_cont').fadeOut(100);
        }

    });

2 个答案:

答案 0 :(得分:6)

这有点简单:

$('body').click( function() {
    $('.ui-autocomplete').hide('');

});

答案 1 :(得分:2)

您可以尝试将click事件绑定到文档。像这样:

$(document).bind('click', function (event) {
    // Check if we have not clicked on the search box
    if (!($(event.target).parents().andSelf().is('.searcher'))) {
        // Hide/collapse your search box, autocomplete or whatever you need to do
    }
});