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)

My current code:

<div class="form-group">     <input type="text"             class="form-control"             id="findJobTitle"             name="findJobTitle"             placeholder="Job Title, Keywords"             onkeyup="showResult()">  </div> 

Current Screenshot:

Answer 1

To get something like this

with Bootstrap 3 and Jquery use the following HTML code:

<div class="btn-group">   <input id="searchinput" type="search" class="form-control">   <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span> </div> 

and some CSS:

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

and Javascript:

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

Of course you have to write more Javascript for whatever functionality you need, e.g. to hide the 'x' if the input is empty, make Ajax requests and so on. See http://www.bootply.com/121508