javascript - 失去父焦点时隐藏无序列表

Question

我有一个输入字段。当用户关注该输入时，该输入下方会出现一个无序列表。

当用户单击列表子项之一时，数据将插入到输入中，并且隐藏无序列表。

当前问题

如果用户单击 input ，但未选择任何选项，然后单击文档中的其他位置，则无序列表将保持显示。

如果我缺少某种可以用来解决此问题的事件，我不知道。

$('body').on('focus blur click', '.autocomplete input , .autocomplete ul,  .autocomplete li' , function() {

if (event.type === 'focus' && event.target.nodeName == 'INPUT') { 
  $(this).siblings('ul').show();
 } else if ((event.type === 'blur' || event.type === 'click' ) && event.target.nodeName == 'LI') {
  $(this).parent('ul').hide();
 }

});


$('body').on('click' ,'li' ,function() {
 
 $('#P1_FIRST_NAME').val($(this).attr('data-value'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="input__container autocomplete">
    <div class="input__label__container">
        <label for="P1_FIRST_NAME" tabindex="999">Autocomplete</label>
    </div>
    <input type="text" id="P1_FIRST_NAME" class="text_field" autocomplete="off" value="">
    <ul for="P1_FIRST_NAME" style="display: none;">
        <li tabindex="1" data-value="MAD">Madder</li>
        <li tabindex="1" data-value="SAD">Sandy</li>
    </ul>
</div>

Answer 1

检查这个fiddle

您需要在 html 绑定(bind)点击事件，并在 input 和 ul 级别停止事件传播

$('body').on('focus blur click', '.autocomplete input , .autocomplete ul,  .autocomplete li' , function(e) {

if (event.type === 'focus' && event.target.nodeName == 'INPUT') { 
  $(this).siblings('ul').show();
 } else if ((event.type === 'blur' || event.type === 'click' ) && event.target.nodeName == 'LI') {
  $(this).parent('ul').hide();
 }
 e.stopPropagation();

});


$('body').on('click' ,'li' ,function(e) {

 $('#P1_FIRST_NAME').val($(this).attr('data-value'));
 e.stopPropagation();

});

$("html").click( function(e) {

 $('ul').hide();

});