JQuery自动完成不会关闭

Question

在我的JQuery中显示自动完成列表，我在下面点击外面时关闭列表：

$(document).bind('click', function (event) {
        // Check if we have not clicked on the search box
        if (!($(event.target).parents().andSelf().is('#showmore'))) {           
            $(".ui-menu-item").display = 'none';
            $(".ui-menu-item").remove();            

        }
    });

列表关闭但不完全！下图显示了文本框下方的一个小白色区域。

页面上的html显示以下内容：

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: block; top: 423.5625px; left: 272.875px; width: 361px;"></ul>

虽然我已关闭自动完成功能并将其显示设置为无，但它仍然存在！请帮我解决这个问题。

Answer 1

根据您的代码，

您必须隐藏ul而不是ui-menu-item。

因此，您必须$(".ui-menu").hide()隐藏搜索框下方的白色背景元素。

在您的代码中，

if (!($(event.target).parents().andSelf().is('#showmore'))) {           
     $(".ui-menu").hide();  
}

您还在代码中关注代码段

  $(".ui-menu-item").display = 'none';

应该是

  $(".ui-menu-item").hide();

display包裹的dom元素中没有jQuery属性。

如果您想使用display: none，请使用

document.querySelectorAll(".ui-menu-item").style.display = "none";

Answer 2

试一试。我认为你在外面的点击工作不正常。并且代码中也存在语法错误。

$(".ui-menu-item").display = 'none'; // this should be 
$(".ui-menu-item").hide(); //instead

---

$(document).mouseup(function (e)
{
    var container = $("ui-menu-item"); // change ui-menu-item to your desired one

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

对此answer的信任。