Schließen ul-Liste auf dem Feld zu verlassen (oder klicken Sie auf Tastatur tab)

Question

komplette Liste der folgt- ist als

<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> 

ich die Liste bekommen, um überall

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

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

außerhalb der Seite mit geklickt geschlossen werden

aber, wie die Liste zu schließen, wenn Tab auf der Tastatur gedrückt wird, wenn ich Unschärfe Ereignis verwenden dann schließt es aber jede Auswahl auf der Liste angeklickt nicht ausgewählt bekommt ...

Answer 1

ausblenden Liste auf der Registerkarte klicken: -

$(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>

Hinweis: -

Wenn eine Taste gedrückt wird, wird dies über Code überprüfen die Schlüsselcode dieses Schlüssels und wenn der Schlüsselcode 9 ist, bedeutet tab key wird gedrückt. dann wird es die Auto-komplette Liste

Answer 2

Taste drücken like..it arbeiten kann

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

Answer 3

die div mit Fokus verloren verstecken oder Unschärfe

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

mit Animation verstecken

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