Javascript 如何隐藏搜索结果框，我希望他们被显示时，按键功能被击中，并得到激活_Javascript_Jquery_Html_Ajax_Django

Javascript 如何隐藏搜索结果框，我希望他们被显示时，按键功能被击中，并得到激活

javascript jquery html ajax django

Javascript 如何隐藏搜索结果框，我希望他们被显示时，按键功能被击中，并得到激活,javascript,jquery,html,ajax,django,Javascript,Jquery,Html,Ajax,Django,您好，我有一个通过调用ajax函数运行的搜索引擎。当用户输入“T”时，结果“TEST”弹出。我使用的是keyup函数，当我不键入任何内容时，它会保持平静。问题是我制作了一个显示结果的框，现在当调用keyup函数时，这个框就会显示出来。我想隐藏此框，并希望在用户在搜索框中键入内容时显示此框。这是我的密码 <form class="navbar-form navbar-left" role="search"> <div class="form-group">

您好，我有一个通过调用ajax函数运行的搜索引擎。当用户输入“T”时，结果“TEST”弹出。我使用的是keyup函数，当我不键入任何内容时，它会保持平静。问题是我制作了一个显示结果的框，现在当调用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>

)

盒子的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 search.html（可能不相关，但我还是会发布）

{%if categories.count>0%}
{categories%%中的类别为%s}

{%endfor%}
{%else%}
没有人可以展示
{%endif%}

为了让这篇文章更清楚，我想做的是堆栈溢出的作用。当你在标题部分键入内容时，类似的问题会弹出，但直到没有显示。我正努力做到这一点……提前谢谢你。


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

$（函数（）{
$（“#搜索”）.on（“按键”，函数（事件）{（“搜索结果”）.show（）；}）；
}
{%csrf_令牌%}

很抱歉，我很难理解您的答案，所以请用onkeyup替换可见性，并将juqery放在哪里？？您介意让我看一下代码吗？是的，就像我预期的那样，这不起作用。我使用的是keyup函数删除onkeyup没有意义…更清楚？这应该可以，按键事件将显示div，然后keyup将运行ajax。您可以对keyup实际使用相同的语法$（“#search”）。在（“keyup”，函数（偶数）{do something；}）；

{% 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 %}

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