<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3 input search</title>
<!-- See How do I clear a search box with an 'x' in bootstrap 3? http://stackoverflow.com/questions/20062218 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group has-feedback">
<label for="txt1" class="col-sm-2 control-label">Label 1</label>
<div class="col-sm-10">
<input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
<span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="txt2" class="col-sm-2 control-label">Label 2</label>
<div class="col-sm-10">
<input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
<span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
</div>
</div>
<div class="form-group has-feedback">
<label for="txt3" class="col-sm-2 control-label">Label 3</label>
<div class="col-sm-10">
<input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
<span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
</div>
</div>
</form>
</div>
<script>
$(".hasclear").keyup(function () {
var t = $(this);
t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
$(this).prev('input').val('').focus();
$(this).hide();
});
</script>
</body>
</html>