CSS

.xInput {
    width: 200px;
}

.xBtn {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}

JS

$(document).ready(function(){
    $(".xInput").keyup(function(){
        $(".xBtn").toggle(Boolean($(this).val()));
    });
    $(".xBtn").toggle(Boolean($(".xInput").val()));
    $(".xBtn").click(function(){
        $(".xInput").val('').focus();
        $(this).hide();
    });
});

HTML

<div class="btn-group">
  <input id="searchinput" class="form-control xInput" placeholder="type something..." value="" type="search">
  <span id="searchclear" class="xBtn glyphicon glyphicon-remove-circle"></span>
</div>