Javascript JQuery自动完成未关闭

在显示自动完成列表的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>

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

根据您的代码

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

您必须隐藏

ul

，而不是

ui菜单项

因此，必须使用

$（“.ui menu”）.hide（）

将白色背景元素隐藏在搜索框下方

在代码中

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

代码中还包含以下代码片段：

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

应该是哪一个

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

jQuery

包装的dom元素中没有

display

属性

如果要使用

display:none

，请使用

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

---

试试这个。我认为你的“点击外部”功能不正常。代码中也有语法错误

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

---

---

归功于此。

隐藏它没有任何意义，他会立即移除它。@blex是的，这是真的。但是jQuery包装对象中的display属性是错误的，这就是为什么要指出它。需要更多的代码来预测确切的问题。但我预测的问题是，正在显示包装自动完成的父元素。您可以共享更多代码或设置JSFIDLE吗？您正在隐藏列表项，但实际上必须隐藏ul。因为白色背景元素是正在显示的ul:）