Закрыть список уль на выходе поля (нажмите или используя вкладку на клавиатуре)

Question

полный список, который является следующим образом-

<div class="autocomplete-list1"> 
    <input type="text" class="addpropertyinput areaname-list-completed" name="property_areaname" id="property_areaname" placeholder="Area Name" onkeyup="autofillareaname()" maxlength="40" required /> 
    <ul class="areaname-list" id="property_areaname_list"></ul> 
</div> 
<div class="errormsg" id="errormsg9"></div> 

я могу получить список будет закрыт с щелкнул в любом месте за пределами страницы

$(window).click(function() { 
$('#property_areaname_list').hide(); 
}); 

$('#property_areaname_list').click(function(event){ 
    event.stopPropagation(); 
}); 

, но как закрыть список, если табуляция нажата на клавиатуре, если я использую событие размытия, то он закрывается, но любой выбор, нажатый в списке, не выбирается ...

Answer 1

Скрыть список на вкладке нажмите: -

$(document).on('keydown', function(e) { 
 
    var keyCode = e.keyCode || e.which; 
 

 
    if (keyCode == 9) { 
 
    $('#property_areaname_list').hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="autocomplete-list1"> 
 
    <input type="text" class="addpropertyinput areaname-list-completed" name="property_areaname" id="property_areaname" placeholder="Area Name" onkeyup="autofillareaname()" maxlength="40" required /> 
 
    <ul class="areaname-list" id="property_areaname_list"><li>1</li></ul> 
 
</div> 
 
<div class="errormsg" id="errormsg9"></div>

Примечание: -

При нажатии любой клавиши, это выше код будет проверять ключевой код этого ключа, и если ключевой код равен 9 означает tab key нажимается. то он будет скрывать автозаполнения списка

Answer 2

использовать клавишу пресса, например..it может работать

$(document).keypress(function(e) { 
    if(e.which == 9) { 
    $('#property_areaname_list').hide(); 
    } 
}); 

Answer 3

скрыть DIV с потерянным фокусом или размыть

$("#property_areaname").focusout(function() { 
     $('#property_areaname_list').hide(); 
    }); 

с анимацией

$("#property_areaname").focusout(function() { 
    $('#property_areaname_list').animate({ 
     display:"none" 
    }); 
});