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

隐藏选项卡上的列表点击： -

＆＃13;

$(document).on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
   $('#property_areaname_list').hide();
  } 
});

＆＃13;

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

＆＃13;

注意： -

当按下任意键时，上面的代码将检查该密钥的密钥代码，如果密钥代码为9则表示按下了 tab key 。然后它会隐藏自动完成列表

Answer 2

使用按键，如..可能正常工作

None

Answer 3

隐藏焦点丢失或模糊的div

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

带动画

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

离开字段时关闭ul列表（单击或使用键盘上的选项卡）

3 个答案: