javascript - how to hide search result box, I want them to be shown up when keyup function is hit and gets activated -
hello have search engine that's run calling ajax function. when user types "t" result "test" pops up. i'm using keyup function when don't type stays calm. problem made box result shown, , right box shown when keyup function being called. want hide box, , want show when user types in search box. here's code.
<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> the ajax,
function handle_keyup() { $.ajax({ type: "post", url: "/search/", data: { 'search_text' : $('#search').val(), 'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() }, success: searchsuccess, datatype: 'html' }); } ;
the css box
.search-box{ border: 5px solid black; width:100px; border-radius: 10px; margin-left: 170px; } function searchsuccess(data, textstatus, jqxhr) { $('#search-results').html(data); } this ajax search.html(probably not relevant i'll post anyway)
{% if categories.count > 0 %} {% category in categories %} <li><a href="/category/{{category.name}}">{{ category.name }}</a></li> {% endfor %} {% else %} <li>none show!</li> {% endif %} so make post clear, i'm trying stack overflow does. when type in title section, similar questions pop right?but untill nothing shows up. i'm trying make that....thank in advance.
<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> 
Comments
Post a Comment