在输入后检测按键事件

Question

我正在构建一个搜索功能，如果用户输入，就会出现一个自动建议框。他一按回车键，自动建议框就消失了，搜索结果被追加，搜索栏中的光标也消失了。现在，当用户再次关注搜索（再次输入）时，自动建议框再次出现。我无法实现声明的后半部分。在下面的代码中，将“child-div”视为自动建议框。到目前为止，我能够实现 -一旦用户输入三个字母，就会出现该框。点击进入后，它消失了。我想进一步实现的目标-在完成上述第二步之后，“I”光标应该会从搜索框中消失。再次关注搜索框时，自动框应该会再次出现。<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) {

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

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

    }

    if( e.which == 13){

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

        e.target.blur();

    }

})

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

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

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

    }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

在这里，您只需在按下回车键后执行一个模糊事件，并注册焦点事件，它会检查是否应该打开子 div

Answer 2

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