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> 

Хотя я закрыл автозаполнения и установить его дисплей нет, его все еще там! PLease помогите мне решить это.

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 недвижимости в jQuery завернутый элемент dom.

Если вы хотите использовать 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.