How do I clear a search box with an 'x' in bootstrap 3?

Question

Having some trouble with bootstrap, so some help would be awesome. Thanks

What I would like:(top part)

Answer 1

Thanks unwired your solution was very clean. I was using horizontal bootstrap forms and made a couple modifications to allow for a single handler and form css.

html: - UPDATED to use Bootstrap's has-feedback and form-control-feedback

 

  

   

    Label 1
    

     
     
    
   
   

    Label 2
    

      
      
    
   
   

    Label 3
    

     
     
    
   
   
  
 

javascript:

$(".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();
});

example: http://www.bootply.com/130682