在输入后检测按键事件

Question

我正在构建一个搜索功能，如果用户输入，就会出现一个自动建议框。他一按回车键，自动建议框就消失了，搜索结果被追加，搜索栏中的光标也消失了。现在，当用户再次关注搜索（再次输入）时，自动建议框再次出现。

我无法实现声明的后半部分。

在下面的代码中，将“child-div”视为自动建议框。

到目前为止，我能够实现 -

1. 一旦用户输入三个字母，就会出现该框。

2. 点击进入后，它消失了。

我想进一步实现的目标-

1. 在完成上述第二步之后，“I”光标应该会从搜索框中消失。

2. 再次关注搜索框时，自动框应该会再次出现。

<div class="container">

              <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">

              <div class="child-div" style="background-color: blueviolet; width: 50%; height: 200px; display: none;">

                CHILD DIV

              </div>

            </div>

$('#searchbar').on('input keydown', function (e) {

    if ($('#searchbar').val().length >= 3) {

        $('.child-div').show();

    }

    if( e.which == 13){

        $('.child-div').hide();

    }

})

如何实现最后一个场景？有人可以帮忙吗？

Answer 1

最简单的方法如下$('#searchbar').on('input keydown', function (e) {&nbsp; &nbsp; if ($('#searchbar').val().length >= 3) {&nbsp; &nbsp; &nbsp; &nbsp; $('.child-div').show();&nbsp; &nbsp; }&nbsp; &nbsp; if( e.which == 13){&nbsp; &nbsp; &nbsp; &nbsp; $('.child-div').hide();&nbsp; &nbsp; &nbsp; &nbsp; e.target.blur();&nbsp; &nbsp; }})$('#searchbar').on('focus', function (e) {&nbsp; &nbsp; if ($('#searchbar').val().length >= 3) {&nbsp; &nbsp; &nbsp; &nbsp; $('.child-div').show();&nbsp; &nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control form-rounded rounded-pill" placeholder="Text input" id="searchbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="child-div" style="background-color: blueviolet; width: 50%; height: 200px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CHILD DIV&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>在这里，您只需在按下回车键后执行一个模糊事件，并注册焦点事件，它会检查是否应该打开子 div

Answer 2

您可以使用 JQuery blur() 和 focus() 事件。当用户按下回车键时，我们将以编程方式关闭框并触发输入 blur() 事件以使其取消焦点。然后注册一个 focus() 事件，只要输入是焦点，它就会显示框。