Autocompletion div won't go away [PHP/JQuery]

Question

I've got a lil question.. I've been working on a JQuery auto-completion system, but I can't get to manage the box that comes up while writing to fade away.

HTML Code:

<div class="content">
        <input type="text" class="search" id="searchid" placeholder="Search for items being sold.." />
        <div id="result"></div>
    </div>

JQuery Code:

$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

jQuery("#result").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});

PHP Code:

<?php
require_once('includes/db_connect.php');
if($_POST) {
    $q = $_POST['search'];
    $sql_res = mysqli_query($conn, "SELECT * FROM entries WHERE item like '%$q%'");

    while($row = mysqli_fetch_array($sql_res)) {
        $item = $row['item'];
    ?>
        <div class="show" align="left">
            <span class="name"><?=$item;?></span>
        </div>
    <?php
    }
}   
    ?>

Print-screen when typed in: http://prntscr.com/7cqbgc Print-screen when backspaced the input: http://prntscr.com/7cqbsa

I hope someone can helps me to make the item's retrieved from the database disappear.

Also, if someone has a clue. How would I make the text in the items bold if it matches to my text input?

Thank you.

Answer 1

Just try like this:-

if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
      if(html !=''){ 
        $("#result").html(html).show();
      }else{
       $("#result").hide();
     }
    }
    });
}else{
    $("#result").hide();return false;
}