如何隐藏搜索结果框，我希望它们在点击并激活键控功能时显示

how to hide search result box, I want them to be shown up when keyup function is hit and gets activated

本文关键字：激活 显示 功能 隐藏 何隐藏 搜索结果 我希望      更新时间：2023-09-26

您好，我有通过调用 ajax 函数运行的搜索引擎。 当用户键入"T"时，会弹出结果"TEST"。我正在使用键up功能，当我不键入任何内容时，它会保持平静。问题是我做了一个框来显示结果，现在当调用 keyup 函数时，该框会显示出来。我想隐藏此框，并希望当用户在搜索框中键入内容时显示此框。这是我的代码。

 <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          {% csrf_token %}
 <input type="text" class="form-control" id="search" name="search" onkeyup="handle_keyup()" placeholder="search"/></div>
      </form>
<div class="search-box">
  <ul id="search-results">
</ul>
</div>

阿贾克斯，

function handle_keyup() {
       $.ajax({
           type: "POST",
           url: "/search/",
           data: { 
               'search_text' : $('#search').val(),
               'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
           },
           success: searchSuccess,
           dataType: 'html'
       });
   }

;

盒子的 CSS

.search-box{
  border: 5px solid black;
  width:100px;
  border-radius: 10px;
  margin-left: 170px;
}

function searchSuccess(data, textStatus, jqXHR)
{
   $('#search-results').html(data);
}

这是 ajax 搜索.html(可能不相关，但我还是会发布(

{% if categories.count > 0 %}
{% for category in categories %}
   <li><a href="/category/{{category.name}}">{{ category.name }}</a></li>
{% endfor %}
{% else %}
<li>None to show!</li>
{% endif %}

所以为了明确这篇文章，我想做的是Stack Overflow所做的。当您在标题部分键入某些内容时，会弹出类似的问题，但在此之前什么都没有显示。我正试图让它变成那样...提前谢谢你。

<html>
   <head>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script> 
        $(function() {
           $("#search").on("keypress",function(event){("#search-results").show();});
         }
</script>
<body>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          {% csrf_token %}
    <input type="text" class="form-control" visibility="hidden" id="search" name="search" onkeyup="handle_keyup()" placeholder="search"/></div>
   </form>
<div class="search-box">
  <ul id="search-results">
  </ul>
</div>
</body>

相关文章：