Question

我有一段JavaScript用于搜索我的网站。当您键入搜索时，它会提取与您查询匹配的产品。这工作正常，但我希望当用户点击页面时关闭下拉列表。我对JavaScript知之甚少，所以任何建议甚至是正确方向的观点都会受到赞赏。

function showSmartSearch() {
    $.ajax({
        url: "index.php?route=product/ajaxsearch&search=" + $("input[name='search']").val(),
        type: "GET",
        success: function(e) {
            $("#smartsearchdiv").css("display", "block");
            var t = "";
            $("#smartsearchdiv").html(e)
        }
    })
}

function hideSmartSearch() {
    $("#smartsearchdiv").css("display", "none")
}
var wait;
$(document).ready(function() {
    $("input[name='search']").after('<div id="smartsearchdiv" style="margin-top:30px;background:white;width:230px;position:absolute;z-index:999;"></div>').blur(function() {}).keydown(function(e) {
        if ($("input[name='search']").length && e.which == 38) {
            e.preventDefault();
            return false
        }
    }).keyup(function(e) {
        if (!$("input[name='search']").val()) {
            $("#smartsearchdiv").css("display", "none")
        }
        var t = $("input[name='search']").val();
        var n = t.length;
        if (t.replace(/^\s+|\s+$/g, "") && (e.which == 8 || 47 < e.which && e.which < 112 || e.which > 185)) {
            if (n > 0) {
                showSmartSearch()
            } else {
                hideSmartSearch()
            }
        }
        if ($("#smartsearchdiv li").length && (e.which == 38 || e.which == 40)) {}
    }).blur(function() {})
});

function hideSmartSearch() {
    $("#smartsearchdiv").css("display", "none");
}

Answer 1

你可以试试这个：

$(document).click(function(e){           // hide list if clicked outside
    if($(e.target).is('#smartSearchDiv, #smartSearchDiv *'))return;
    hideSmartSearch();
});

还有：

$(document).click(function(e){           // hide list if clicked outside
    if(!$(e.target).is('#smartSearchDiv'))
    hideSmartSearch();
});

Answer 2

使用此：

$("#smartSearchDiv").click(function(e){
    e.stopPropagation();
});    

$(body).click(function(){
     if($("#smartSearchDiv").is(":visible")){
         hideSmartSearch();
     }
});

这样，如果你点击你的搜索div，事件将停止传播给它的父母，什么都不会发生。否则，它将升至您的body并启动近距离功能。

Javascript没有关闭菜单

2 个答案: