javascript - How can I hide ajax search results when input text is cleared? -

i ajax search work, couldn't hide results when clear input text box. also, couldn't select search result should retain in input text box 

here ajax code : ajax.js

$(function () { $('#search').keyup(function () {     $.ajax({         type: "post",         url: "search",         data: {             'search_text': $('#search').val(),             'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()         },         success: searchsuccess,         datatype: 'html'     }); }); });  function searchsuccess(data, textstatus, jqxhr) { $('#search-results').html(data); } 

here html template template.html

<input type="text" id="search" name="search" class="search" value="enter loc" size="35" maxlength="300" style="margin-left:10px;color:#d5caca" onclick="document.getelementbyid('search').value = ''" />     <a class="lr" style="text-decoration:none" href="#">search</a>     <ul id="search-results" style="color:#ffffff;margin-left:35%">     </ul> 

thanks in advance help!**

clear result panel if value blank

$(function () {     $('#search').keyup(function () {         //clear result panel if value blank         if (!this.value.trim()) {             $('#search-results').html('');             return;         }         $.ajax({             type: "post",             url: "search",             data: {                 'search_text': $('#search').val(),                 'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()             },             success: searchsuccess,             datatype: 'html'         });     }); });  function searchsuccess(data, textstatus, jqxhr) {     $('#search-results').html(data); }