Question

我有一个文本输入，用户可以在其中输入搜索结果。想法是在文本输入下方的框中显示建议，这会显示结果。

下面的框：

<div class="searchResult">
    <ul class="resultSet">

    </ul>                  
</div>

一些CSS：

.searchResult {
    display: none;
    position: absolute;
    top: $search-result-position-top;
    width: $search-input-width+$bx-search-input-padding*2+2;
    left: -1px;
    z-index: 9999999;
    max-height: 10*($search-result-row-height+1.1);
    overflow-y: auto;

    .imgholder img {
        width: $search-result-img-width;
        height: $search-result-img-height;
    }
}

我想要做的是使用以下jQuery（到目前为止只是一个测试，因为它会自动关闭）：

$(document).ready(function ()
{
    $("#search").find("input").on('keyup', function (e)
    {
        var textInput = $("#search").find("input").val();
        if (textInput.length >= 3)
        {
            $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link1</a></li>');
            $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link2</a></li>');
            $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link3</a></li>');
            $("#search").find(".searchResult").show();
            e.preventDefault();
        }
    });
});

发生的是，三个链接显示在一个框中，就像我期望的那样。但是在显示框自动关闭之后。使用e.preventDefault();会导致它稍后隐藏，但不会阻止它。

请帮助我，我无法弄清楚导致它自动关闭的原因。

Answer 1

您发布的代码不是您所描述的问题的原因。我创造了一个小提琴，它运作良好：

<div id="search">
  <input type=text/>

  <div class="searchResult">
    <ul class="resultSet">

    </ul>
  </div>

</div>

$("#search").find("input").on('keyup', function(e) {
  var textInput = $("#search").find("input").val();
  if (textInput.length >= 3) {
    $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link1</a></li>');
    $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link2</a></li>');
    $("#search").find(".searchResult ul").append('<li class="resultRow"><a>link3</a></li>');
    $("#search").find(".searchResult").show();
    e.preventDefault();
  }

}）;

https://jsfiddle.net/mopzadLq/1/

jQuery：div在show之后自动关闭

1 个答案: