Question

我正在构建一个搜索功能，如果用户键入内容，则会出现一个自动提示框。当他按下Enter键时，自动提示框就会消失，搜索结果会被追加，搜索栏中的光标也会消失。现在，当用户再次专注于搜索（再次键入）时，自动提示框将再次出现。

我无法实现陈述的后半部分。

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

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

用户输入三个字母后，就会出现一个框。
按下Enter键，它就会消失。

我想进一步实现的目标-

上面的第二步之后，“ 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

您可以使用JQuery blur（）和focus（）事件。当用户按下Enter键时，我们将以编程方式关闭该框并触发输入blur（）事件以使其失去焦点。然后注册一个focus（）事件，只要输入为焦点，该事件就会显示该框。

Answer 2

最简单的方法如下

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

按下Enter键后检测按键事件

2 个答案: