clear-search-icon

clear input with an x icon

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="btn-group">
    <input id="searchinput" type="search" class="form-control"> 
    <span id="searchclear" class="fa fa-times-circle"></span>
</div>

CSS

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 150px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

JavaScript

$("#searchclear").click(function () {
    $("#searchinput").val('');
});